/* ==========================================================================
   PIE DE PAGINA DEL SITIO PUBLICO
   Marcado en sitio_web/componentes/pie_pagina.html
   Los colores --pie-fondo y --pie-texto llegan desde el panel.
   ========================================================================== */

.pie {
    --pie-borde: rgba(255, 255, 255, .09);
    --pie-tenue: rgba(255, 255, 255, .58);
    --pie-acento: #c9788a;
    padding: clamp(48px, 6vw, 76px) 0 0;
    background: var(--pie-fondo, #050f1b);
    color: var(--pie-texto, #e2e8f0);
    font-size: 15px;
    line-height: 1.6;
}
.pie *, .pie *::before, .pie *::after { box-sizing: border-box; }
/* Alineado con la columna de contenido (--sitio-contenedor), para que
   el logotipo del pie caiga justo debajo del de la cabecera. */
.pie-ancho { width: min(var(--sitio-contenedor, 1400px), calc(100% - 60px));
             margin-inline: auto; }

/* ---------- Distribucion ---------- */
.pie-reja {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(34px, 4vw, 48px);
}

/* ---------- Identidad ---------- */
/* El logotipo del pie es la version blanca y se apoya directamente en el
   fondo oscuro. El recuadro blanco que habia aqui existia para que se
   leyera el logotipo a color, que ahora vive solo en el encabezado. */
/* Es un enlace al inicio, así que tiene que notarse que se puede pulsar. */
.pie-logo-marco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 290px;
    text-decoration: none;
    transition: opacity .16s ease;
    padding: 0;
    border-radius: 12px;
    background: transparent;
}
a.pie-logo-marco:hover { opacity: .78; }
a.pie-logo-marco:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
.pie-logo-marco img { display: block; width: 100%; height: auto; max-height: 76px; object-fit: contain; }
.pie-marca { display: block; color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }

.pie-descripcion {
    max-width: 42ch;
    margin: 20px 0 0;
    color: var(--pie-tenue);
    font-size: 14.5px;
}

/* ---------- Redes sociales ---------- */
.pie-redes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.pie-redes a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pie-borde);
    border-radius: 10px;
    color: var(--pie-tenue);
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.pie-redes a:hover {
    border-color: var(--pie-acento);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    transform: translateY(-2px);
}
.pie-redes svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Columnas ---------- */
.pie-columna { display: flex; flex-direction: column; align-items: flex-start; }
/* Sin la rayita roja debajo: el título ya se distingue por el tamaño y
   el espaciado, y las cuatro rayas juntas ensuciaban el pie. */
.pie-columna h2 {
    margin: 0 0 18px;
    padding-bottom: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.pie-columna a {
    padding: 6px 0;
    color: var(--pie-tenue);
    font-size: 14.5px;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}
.pie-columna a:hover { color: #fff; transform: translateX(3px); }

/* ---------- Datos de contacto ---------- */
.pie-dato {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 15px;
    color: var(--pie-tenue);
    font-size: 14.5px;
}
.pie-dato:last-child { margin-bottom: 0; }
.pie-dato svg {
    width: 17px; height: 17px; flex: 0 0 17px;
    margin-top: 3px;
    fill: none; stroke: var(--pie-acento); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.pie-dato a { color: var(--pie-tenue); text-decoration: none; transition: color .15s ease; }
.pie-dato a:hover { color: #fff; text-decoration: underline; }

/* ---------- Franja inferior ---------- */
.pie-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 0 24px;
    border-top: 1px solid var(--pie-borde);
}
.pie-copyright { color: var(--pie-tenue); font-size: 13.5px; }
.pie-copyright b {
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--pie-texto);
    font-size: 11.5px;
    font-weight: 700;
}

.pie-desarrollado {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--pie-tenue);
    font-size: 12.5px;
    text-decoration: none;
    transition: color .15s ease;
}
.pie-desarrollado:hover { color: #fff; }
.pie-desarrollado strong { color: var(--pie-texto); font-size: 13.5px; letter-spacing: .02em; }
.pie-desarrollador-logo {
    display: inline-flex;
    align-items: center;
}
.pie-desarrollador-logo img {
    display: block;
    height: var(--desarrollador-logo-alto, 26px);
    width: auto;
    /* El archivo es tinta azul sobre transparencia y los huecos del icono
       son transparentes de verdad, no blancos. Por eso antes vivia dentro
       de una caja blanca: sobre el pie oscuro no se leia. La caja se fue y
       en su lugar el logo se calca en blanco —brightness(0) lo pasa todo a
       negro conservando el alfa, invert(1) lo vuelve blanco—, que es como
       se usa un logotipo troquelado sobre fondo oscuro. El panel, que tiene
       el pie blanco, sigue mostrando el mismo archivo en su azul. */
    filter: brightness(0) invert(1);
    opacity: .92;
    transition: opacity .15s ease;
}
.pie-desarrollado:hover .pie-desarrollador-logo img { opacity: 1; }

/* ---------- Pantallas pequenas ---------- */
@media (max-width: 980px) {
    .pie-reja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie-identidad { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .pie-reja { grid-template-columns: 1fr; gap: 30px; }
    .pie-inferior { flex-direction: column; align-items: flex-start; }
    .pie-copyright b { margin-left: 0; margin-top: 8px; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
    .pie *, .pie *::before, .pie *::after { transition: none !important; }
}

/* ==========================================================================
   BLOQUES INFERIORES DEL PIE
   Formas de pago, respaldos, libro de reclamaciones y franja legal.
   ========================================================================== */

/* ---------- Bloque de contacto dentro de la identidad ---------- */
.pie-subtitulo {
    margin: 26px 0 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pie-datos { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.pie-datos li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--pie-tenue);
    font-size: 14.5px;
}
.pie-datos svg {
    width: 17px; height: 17px; flex: 0 0 17px;
    margin-top: 3px;
    fill: none; stroke: var(--pie-acento); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.pie-datos a { color: var(--pie-tenue); text-decoration: none; transition: color .15s ease; }
.pie-datos a:hover { color: #fff; text-decoration: underline; }

/* ---------- Formas de pago ---------- */
.pie-pagos {
    margin-bottom: 18px;
    border: 1px solid var(--pie-borde);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
}
.pie-pagos-fila {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    border-top: 1px solid var(--pie-borde);
}
.pie-pagos-fila:first-child { border-top: 0; }
.pie-pagos-titulo {
    color: var(--pie-texto);
    font-size: 13px;
    font-weight: 750;
}
.pie-pagos-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.pie-pago-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 42px;
    padding: 6px 12px;
    border-radius: 9px;
    background: #fff;
}
.pie-pago-logo img { max-width: 58px; max-height: 28px; width: auto; height: auto; display: block; }
.pie-pago-texto {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--pie-borde);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: var(--pie-texto);
    font-size: 13.5px;
    font-weight: 650;
}

/* ---------- Respaldos ---------- */
.pie-garantias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 14px 26px;
    margin: 0 0 18px;
    padding: 17px 22px;
    border: 1px solid var(--pie-borde);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    list-style: none;
}
.pie-garantias li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pie-texto);
    font-size: 13.5px;
}
.pie-garantias svg {
    width: 19px; height: 19px; flex: 0 0 19px;
    fill: none; stroke: var(--pie-acento); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Libro de reclamaciones ---------- */
.pie-libro {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(560px, 100%);
    margin: 0 auto 22px;
    padding: 15px 22px;
    border: 1px solid var(--pie-borde);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    color: var(--pie-texto);
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}
.pie-libro:hover { border-color: var(--pie-acento); background: rgba(255, 255, 255, .08); }
.pie-libro svg {
    width: 38px; height: 38px; flex: 0 0 38px;
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.pie-libro strong { display: block; font-size: 15px; }
.pie-libro small { display: block; margin-top: 3px; color: var(--pie-tenue); font-size: 12.5px; }

/* ---------- Franja legal ---------- */
.pie-inferior { justify-content: space-between; }
.pie-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    color: var(--pie-tenue);
    font-size: 13px;
}
.pie-legal span { position: relative; }
.pie-legal span + span::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 12px;
    background: var(--pie-borde);
    transform: translateY(-50%);
}
.pie-inferior .pie-redes { margin-top: 0; }
.pie-inferior .pie-redes a { width: 36px; height: 36px; border-radius: 50%; }
.pie-inferior .pie-redes svg { width: 17px; height: 17px; }

@media (max-width: 780px) {
    .pie-pagos-fila { grid-template-columns: 1fr; gap: 11px; }
    .pie-garantias { justify-content: flex-start; }
    .pie-inferior { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================================
   CONMUTADOR RESUMIR / EXTENDER
   ========================================================================== */

.pie { position: relative; }

.pie-conmutador {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 24px;
    border: 1px solid var(--pie-borde);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--pie-fondo, #050f1b);
    color: var(--pie-texto, #e2e8f0);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transform: translateX(-50%);
    transition: color .16s ease, border-color .16s ease;
}
.pie-conmutador:hover { border-color: var(--pie-acento); color: #fff; }
.pie-conmutador svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s ease;
}
.pie-conmutador[aria-expanded="false"] svg { transform: rotate(180deg); }

/* Deja sitio al boton cuando esta presente */
.pie:has(.pie-conmutador) { padding-top: clamp(64px, 7vw, 92px); }

/* Plegado, el pie es una franja de paso y no una seccion: se aprieta.
   Arriba solo hay que dejar libre el boton, que mide unos 44 px, no los
   92 que pide el pie desplegado. Va detras de la regla de arriba a
   proposito: las dos tienen la misma especificidad y gana la ultima. */
.pie:has(.pie-plegable.plegado) { padding-top: 56px; }
.pie:has(.pie-plegable.plegado) .pie-inferior { padding: 13px 0 16px; }

/* El bloque plegable.
   grid-template-rows:0fr solo encoge la PRIMERA fila del grid, asi que todo
   el contenido va dentro de un unico hijo. Si se cuelgan varios hermanos
   directos de .pie-plegable, al plegar queda un hueco vacio. */
.pie-plegable {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .32s ease, opacity .24s ease;
}
.pie-plegable-interior { min-height: 0; overflow: hidden; }
.pie-plegable.plegado {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

/* Redes: soporta imagen subida ademas del icono dibujado */
.pie-redes a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.pie-inferior .pie-redes a img { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .pie-plegable { transition: none; }
}

/* ---------- Resumen visible cuando el pie esta plegado ---------- */
.pie-resumen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px 26px;
    flex-wrap: wrap;
    padding: 0 0 13px;
}
.pie-resumen[hidden] { display: none; }
/* Mismo caso que .pie-logo-marco: el logotipo ya es blanco y el recuadro
   solo servía para que se leyera la versión a color. */
.pie-resumen-logo {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 10px;
    background: transparent;
}
.pie-resumen-logo img { display: block; height: 31px; width: auto; }
.pie-resumen ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pie-resumen li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pie-texto);
    font-size: 13.5px;
}
.pie-resumen svg {
    width: 16px; height: 16px; flex: 0 0 16px;
    fill: none; stroke: var(--pie-acento); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.pie-resumen a { color: var(--pie-texto); text-decoration: none; }
.pie-resumen a:hover { text-decoration: underline; }
.pie-resumen-enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-resumen-enlaces a { color: var(--pie-tenue); font-size: 13px; }
.pie-resumen-enlaces a:hover { color: #fff; }

@media (max-width: 780px) {
    .pie-resumen { justify-content: flex-start; }
    .pie-resumen ul { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* El logotipo de WhatsApp es una silueta rellena, no un dibujo de
   líneas como el resto de iconos del pie. */
.pie-redes svg.glifo-marca { fill: currentColor; stroke: none; }

/* Contacto por áreas: el nombre del área encima del número, para que se
   vea a cuál se llama sin tener que adivinarlo. */
.pie-dato-area { align-items: flex-start; }
.pie-dato-area svg { margin-top: 3px; }
.pie-dato-area > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pie-dato-area b {
    color: var(--pie-tenue, #94a3b8);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ==========================================================================
   ACORDEON DEL PIE EN CELULAR
   Contactanos, Servicios, Empresa y Mi cuenta se pliegan por debajo de
   560px. En pantallas anchas el boton va desactivado y luce como titulo.
   ========================================================================== */
.pie-acordeon-boton {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.pie-acordeon-boton:disabled { cursor: default; }
.pie-acordeon-boton svg {
    display: none;
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s ease;
}
.pie-acordeon-interior { display: flex; flex-direction: column; align-items: flex-start; }
.pie-identidad .pie-acordeon-interior { display: block; }

@media (max-width: 560px) {
    .pie-reja { gap: 0; }
    .pie-identidad { padding-bottom: 8px; }

    /* Logo y descripcion centrados; el acordeon de abajo sigue a lo ancho. */
    /* Compacto: logo mas bajo y la descripcion pegada a el. */
    .pie { padding-top: 32px; }
    /* El boton "Resumir informacion" cuelga arriba: se deja
       justo su alto (unos 38px ya achicado) mas un respiro. */
    .pie:has(.pie-conmutador) { padding-top: 50px; }
    .pie-conmutador { padding: 9px 20px; font-size: 12.5px; }
    .pie-logo-marco { display: flex; max-width: 190px; margin-inline: auto; }
    .pie-logo-marco img { max-height: 48px; }
    .pie-marca { text-align: center; font-size: 22px; }
    .pie-descripcion {
        max-width: 36ch;
        margin: 10px auto 0;
        font-size: 13.5px;
        line-height: 1.5;
        text-align: center !important;
        text-align-last: center;
        hyphens: manual;
    }

    /* Cada seccion es una fila a todo lo ancho con raya arriba, como una
       lista. La columna alinea a la izquierda en escritorio; aqui se estira
       para que las cuatro filas midan lo mismo. */
    .pie-columna { align-items: stretch; }
    .pie-subtitulo,
    .pie-columna h2 {
        width: 100%;
        margin: 0;
        border-top: 1px solid var(--pie-borde);
        color: #fff;
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }
    .pie-subtitulo { margin-top: 24px; }
    .pie-columna:last-child { border-bottom: 1px solid var(--pie-borde); }

    .pie-acordeon-boton {
        box-sizing: border-box;
        min-height: 56px;
        padding: 0 2px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .pie-acordeon-boton svg { display: block; margin-left: auto; color: var(--pie-tenue); }
    .pie-acordeon-boton span { flex: 1 1 auto; }
    .pie-acordeon-boton[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--pie-acento); }
    .pie-acordeon-boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

    /* Solo se pliega si el script corrio; sin JS el pie se ve completo. */
    .pie-acordeon-listo .pie-acordeon-cuerpo {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .26s ease;
    }
    .pie-acordeon-listo .pie-acordeon-cuerpo.abierto { grid-template-rows: 1fr; }
    .pie-acordeon-cuerpo > .pie-acordeon-interior { min-height: 0; overflow: hidden; padding: 0 2px; }
    .pie-columna .pie-acordeon-interior { align-items: stretch; }
    .pie-columna .pie-acordeon-interior a { padding: 9px 0; }
    .pie-acordeon-cuerpo > .pie-acordeon-interior::after { content: ""; display: block; height: 18px; flex: 0 0 18px; }
}

/* ==========================================================================
   FORMAS DE PAGO, RESPALDOS Y RECLAMOS
   Tarjetas gris claro lisas con letra negra, al estilo Apple, sobre el pie
   oscuro, en todas las pantallas. Los iconos pasan al vino de la marca: el
   rosa del pie no se lee sobre gris claro.
   ========================================================================== */
.pie-pagos,
.pie-garantias,
.pie-libro {
    border: 0;
    border-radius: 18px;
    background: #f5f5f7;
    color: #1d1d1f;
}

/* Formas de pago */
.pie-pagos-fila { border-top-color: #e3e3e8; }
.pie-pagos-titulo {
    color: #6e6e73;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pie-pago-logo { border: 1px solid #e3e3e8; border-radius: 10px; }
.pie-pago-texto {
    border: 1px solid #e3e3e8;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-weight: 500;
}

/* Respaldos */
.pie-garantias li { color: #1d1d1f; }
.pie-garantias svg { stroke: #6b1e2e; }

/* Libro de reclamaciones */
.pie-libro:hover { background: #ececf0; }
.pie-libro svg { color: #6b1e2e; }
.pie-libro strong { color: #1d1d1f; font-weight: 600; }
.pie-libro small { color: #6e6e73; }

@media (max-width: 560px) {
    .pie-pagos-fila { padding: 16px 18px; }

    /* Respaldos: lista agrupada, una fila por garantia. */
    .pie-garantias {
        display: block;
        padding: 4px 18px;
    }
    .pie-garantias li {
        padding: 13px 0;
        font-size: 14.5px;
    }
    .pie-garantias li + li { border-top: 1px solid #e3e3e8; }

    .pie-libro { padding: 16px 18px; }
    .pie-libro svg { width: 34px; height: 34px; flex-basis: 34px; }
}

/* ==========================================================================
   LOGO Y SLOGAN UNIDOS
   El PNG del logo del pie (logo-blanco-admiconta.png, 2718x705) trae aire
   transparente propio: ~16% arriba, ~20% abajo y ~10% a cada lado. Ese
   aire se sumaba al margen del slogan y los dejaba muy separados, y el
   logo se veia corrido a la derecha del texto. Se compensa aqui: se tira
   del slogan hacia arriba y el logo se alinea al borde del texto.
   Si se sube un logo recortado al ras, basta con quitar este bloque.
   ========================================================================== */
.pie-logo-marco { justify-content: flex-start; margin-bottom: -14px; }
.pie-logo-marco img { transform: translateX(-9.9%); }
.pie-descripcion {
    margin-top: 6px;
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
}
@media (max-width: 560px) {
    /* En celular va centrado: el aire lateral es igual a los dos lados. */
    .pie-logo-marco { justify-content: center; margin-bottom: -9px; }
    .pie-logo-marco img { transform: none; }
    .pie-descripcion { margin-top: 6px; text-align: center !important; text-align-last: center; }
}

/* ==========================================================================
   COLUMNAS CON FILETE
   Fondo de un solo color; cada titulo de columna lleva un filete fino
   encima y los enlaces van mas claros, sin moverse al pasar el raton.
   ========================================================================== */
@media (min-width: 561px) {
    .pie-columna h2,
    .pie-subtitulo {
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .18);
        color: rgba(255, 255, 255, .62);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .16em;
    }
    .pie-columna h2 { width: 100%; }
    .pie-columna a {
        color: rgba(255, 255, 255, .86);
        font-size: 15px;
        text-underline-offset: 4px;
    }
    .pie-columna a:hover { color: #fff; transform: none; text-decoration: underline; }
}

/* ==========================================================================
   ICONOS DE CONTACTO
   Cada icono va en una baldosa solida de esquinas suaves, trazo fino y
   blanco. Contabilidad lleva calculadora y facturacion un comprobante,
   en vez del mismo telefono repetido.
   ========================================================================== */
.pie-datos { gap: 14px; }
.pie-datos li { align-items: flex-start; gap: 14px; }
.pie-dato-icono {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #161a26;
    color: #fff;
}
.pie-datos .pie-dato-icono svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* El texto de una sola linea se centra con la baldosa; el de area
   (etiqueta + telefono + correo) arranca a su altura. */
.pie-datos li > span:not(.pie-dato-icono),
.pie-datos li > a { align-self: center; }
.pie-dato-area > span:not(.pie-dato-icono) { align-self: flex-start; padding-top: 1px; }
.pie-dato-area b { display: block; margin-bottom: 2px; color: rgba(255, 255, 255, .62); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pie-dato-area a { display: block; }
.pie-datos li:hover .pie-dato-icono { background: var(--marca-marron, #6b1e2e); }
.pie-dato-icono { transition: background-color .2s ease; }
/* La baldosa tambien es un span hijo del area: que no herede la columna. */
.pie-datos li > .pie-dato-icono { display: grid; flex-direction: initial; gap: 0; }

/* ==========================================================================
   PIE RESUMIDO
   Una barra de contacto de verdad: logo, cuatro datos con rotulo y la
   misma baldosa de icono del pie completo, y los accesos como pildoras.
   ========================================================================== */
.pie-resumen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 36px;
    padding: 6px 0 22px;
}
.pie-resumen[hidden] { display: none; }
/* El PNG trae aire transparente arriba y abajo: se le da mas alto para
   que la marca visible tenga presencia. */
.pie-resumen-logo img { height: 46px; margin-block: -6px; }

.pie-resumen ul.pie-resumen-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
    justify-content: center;
    gap: 14px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pie-resumen-datos li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.pie-resumen-datos li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.pie-resumen-datos small {
    color: rgba(255, 255, 255, .5);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.pie-resumen-datos a,
.pie-resumen-datos b {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pie-resumen-datos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie-resumen .pie-dato-icono svg {
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.pie-resumen-datos li:hover .pie-dato-icono { background: var(--marca-marron, #6b1e2e); }

.pie-resumen-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.pie-resumen-enlaces a {
    padding: 8px 14px;
    border-radius: 999px;
    background: #161a26;
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.pie-resumen-enlaces a:hover { background: #fff; color: #0b1320; text-decoration: none; }

@media (max-width: 1280px) {
    .pie-resumen { grid-template-columns: auto minmax(0, 1fr); }
    .pie-resumen-enlaces { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 780px) {
    .pie-resumen { grid-template-columns: 1fr; justify-items: center; }
    .pie-resumen ul.pie-resumen-datos { grid-template-columns: 1fr; justify-content: stretch; width: 100%; }
    .pie-resumen-datos li { padding: 10px 12px; border-radius: 14px; background: #10131c; }
    .pie-resumen-datos a, .pie-resumen-datos b { white-space: normal; }
}

/* Baldosas y pildoras mas suaves: un velo blanco muy tenue con filete
   fino, en lugar del bloque solido que contrastaba demasiado. El icono,
   en gris claro. Vale para el pie completo y el resumido. */
.pie-dato-icono {
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .78);
}
.pie-datos li:hover .pie-dato-icono,
.pie-resumen-datos li:hover .pie-dato-icono {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    color: #fff;
}
.pie-resumen-enlaces a {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .78);
}
.pie-resumen-enlaces a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Resumido: los datos se ven enteros, sin cortar con puntos suspensivos;
   si no caben en una fila, bajan a la siguiente. */
.pie-resumen ul.pie-resumen-datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 30px;
}
.pie-resumen-datos a,
.pie-resumen-datos b { white-space: nowrap; overflow: visible; text-overflow: clip; }
@media (max-width: 780px) {
    .pie-resumen ul.pie-resumen-datos { flex-direction: column; align-items: stretch; }
    .pie-resumen-datos li { background: rgba(255, 255, 255, .03); }
    .pie-resumen-datos a, .pie-resumen-datos b { white-space: normal; }
}

/* ==========================================================================
   PIE RESUMIDO: ESTRUCTURA EN DOS FILAS
   Arriba, marca a la izquierda y accesos a la derecha, con filete debajo.
   Abajo, los cuatro datos en cuatro columnas iguales separadas por filetes
   verticales; cada texto cabe en su columna y, si hace falta, parte linea
   dentro de ella sin descolocar a los demas. Pisa lo anterior.
   ========================================================================== */
.pie-resumen {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo enlaces"
        "datos datos";
    align-items: center;
    gap: 0;
    padding: 8px 0 0;
}
.pie-resumen-logo { grid-area: logo; padding-bottom: 18px; }
.pie-resumen-enlaces {
    grid-area: enlaces;
    justify-content: flex-end;
    padding-bottom: 18px;
}
.pie-resumen ul.pie-resumen-datos {
    grid-area: datos;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.pie-resumen-datos li {
    align-items: flex-start;
    padding: 20px 22px;
    border-left: 1px solid rgba(255, 255, 255, .09);
}
.pie-resumen-datos li:first-child { padding-left: 0; border-left: 0; }
.pie-resumen-datos li:last-child { padding-right: 0; }
.pie-resumen-datos li > span:last-child { gap: 4px; padding-top: 1px; }
.pie-resumen-datos a,
.pie-resumen-datos b {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

@media (max-width: 1280px) {
    .pie-resumen-enlaces { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 1100px) {
    .pie-resumen ul.pie-resumen-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie-resumen-datos li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .pie-resumen-datos li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
}
/* Los accesos, al centro de la página (en línea con «Ver más
   información») y los tres del mismo ancho. La tercera columna, vacía y
   del mismo ancho que la del logo, es la que los deja centrados de verdad. */
.pie-resumen {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
        "logo enlaces ."
        "datos datos datos";
}
.pie-resumen-logo { justify-self: start; }
.pie-resumen-enlaces {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    justify-content: center;
}
.pie-resumen-enlaces a { text-align: center; white-space: nowrap; }
@media (max-width: 1280px) {
    .pie-resumen-enlaces { justify-content: center; }
}

@media (max-width: 780px) {
    .pie-resumen {
        grid-template-columns: 1fr;
        grid-template-areas: "logo" "datos" "enlaces";
        justify-items: stretch;
    }
    .pie-resumen-logo { justify-self: center; }
    .pie-resumen-enlaces { justify-content: center; padding: 16px 0 18px; }
    .pie-resumen ul.pie-resumen-datos { display: grid; grid-template-columns: 1fr; }
    .pie-resumen-datos li {
        padding: 14px 0;
        border-left: 0;
        border-radius: 0;
        background: none;
    }
    .pie-resumen-datos li + li { border-top: 1px solid rgba(255, 255, 255, .09); }
}

/* ==========================================================================
   FORMAS DE PAGO, RESPALDOS Y RECLAMOS: MISMO FONDO DEL PIE
   Sin tarjeta clara: el fondo es el del pie y lo que los separa es un
   borde claro que se nota. Pisa el bloque gris anterior.
   ========================================================================== */
.pie {
    --pie-marco: rgba(255, 255, 255, .2);
    --pie-marco-suave: rgba(255, 255, 255, .1);
}
.pie-pagos,
.pie-garantias,
.pie-libro {
    border: 1px solid var(--pie-marco);
    background: transparent;
    color: var(--pie-texto, #e2e8f0);
}
.pie-pagos-fila { border-top-color: var(--pie-marco-suave); }
.pie-pagos-titulo { color: rgba(255, 255, 255, .6); }
.pie-pago-logo { border: 0; }
.pie-pago-texto {
    border: 1px solid var(--pie-marco);
    background: transparent;
    color: #fff;
}

.pie-garantias li { color: rgba(255, 255, 255, .88); }
.pie-garantias svg { stroke: rgba(255, 255, 255, .78); }

.pie-libro:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .03); }
.pie-libro svg { color: rgba(255, 255, 255, .85); }
.pie-libro strong { color: #fff; }
.pie-libro small { color: rgba(255, 255, 255, .6); }

@media (max-width: 560px) {
    .pie-garantias li + li { border-top-color: var(--pie-marco-suave); }
}

/* Sin justificar en las listas del pie: la regla general del sitio
   (p, li justificados) abria huecos en la direccion y los datos cortos. */
.pie li,
.pie p {
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* En el teléfono los tres accesos no caben en una fila del mismo ancho:
   bajan de línea, centrados. */
@media (max-width: 780px) {
    .pie-resumen-enlaces { display: flex; flex-wrap: wrap; justify-content: center; }
}