/* ==========================================================================
   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, 1500px), 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;
}