/* Footer.css — Pie de página. Se enlaza desde _Layout.cshtml, no desde la vista: está en todas las
   páginas. Nodos 1535:27449 (PC), 1535:27762 (tablet), 1535:28114 (móvil). Tipografía: site.css.
   La maquetación la resuelven utilidades de Bootstrap desde la vista; acá quedan colores, medidas y
   TODO el comportamiento por rango (ninguno de los dos cortes coincide con uno de Bootstrap).
   Paleta: #1b2d3a fondo, #ffffff texto, #73acff títulos, #ed1c24 etiqueta, blanco 12 % las líneas. */

/* La caja externa .Footer no tiene regla propia: el fondo lo pone .Footer-body y el blanco de
   arriba .Footer-topStripe. Queda como gancho del widget. */

/* --- Franja blanca sobre el pie, a sangre completa. --- */
.Footer-topStripe {
    height: 48px; /* Alto del diseño, igual en los tres rangos. */
    background-color: #ffffff; /* Separa el pie del cuerpo de la página. */
}

/* --- Caja del fondo. VA A SANGRE COMPLETA: acotarla con un max-width cortaría el fondo antes de
   llegar a los bordes de la ventana. --- */
.Footer-body {
    background-color: #1b2d3a; /* Azul petróleo del rediseño. */
}

/* Contenedor del contenido, centrado dentro del techo del sitio. El relleno lateral va en una
   variable porque .Footer-badge la lee para anclarse al mismo borde: un elemento absoluto se ubica
   contra la CAJA DE RELLENO, así que con la utilidad de Bootstrap quedaba corrido. */
.Footer-container {
    --footer-pad: 24px; /* Relleno lateral de escritorio. Los @media lo reasignan. */
    position: relative; /* Referencia de posicionamiento de .Footer-badge. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding-top: 40px; /* Aire sobre el contenido, del diseño. */
    padding-bottom: 24px; /* Aire bajo la barra inferior, del diseño. */
    padding-inline: var(--footer-pad); /* Relleno lateral compartido con el badge. */
}

/* Etiqueta destacada, al ras del borde superior derecho. VA EN ABSOLUTO: en el flujo empujaría todo
   el contenido hacia abajo. */
.Footer-badge {
    position: absolute; /* Sobre el contenido. */
    top: 0; /* Al ras del borde superior del bloque azul. */
    right: var(--footer-pad); /* Al ras del borde derecho del contenido. */
    padding: 6px 12px; /* Relleno del diseño. */
    background-color: #ed1c24; /* Rojo de la etiqueta. */
    color: #ffffff; /* Texto blanco. */
    font-size: 16px; /* Tamaño de escritorio y tablet; móvil lo baja a 14px. */
    font-weight: 700; /* Negrita. */
    line-height: normal; /* El diseño no aprieta este renglón. */
    white-space: nowrap; /* Una sola línea: partirla la deformaría contra el borde. */
    z-index: 1; /* Se apoya sobre el contenido de la primera fila. */
}

/* --- Bloque de marca: logo, descripción, tagline y redes. --- */

/* Logo de la empresa. */
.Footer-logo {
    display: block; /* Quita el hueco de renglón que deja un img en línea. */
    height: 28px; /* Alto MEDIDO sobre el render: los frames del archivo son cajas contenedoras. */
    width: auto; /* Sale de la proporción del archivo. */
    margin-bottom: 14px; /* Separación con el bloque de marca. */
}

/* Bloque de marca: la descripción y el logo secundario en la misma línea. */
.Footer-brand {
    margin-bottom: 8px; /* Separación con el tagline. */
}

    /* Descripción de la marca. La vista emite este p sin clase: es esta regla la que lo estiliza. */
    .Footer-brand p {
        margin: 0; /* El margen propio del p rompería la alineación con el logo. */
        font-size: 12px; /* Tamaño del diseño. */
        font-weight: 700; /* Negrita. */
        color: #ffffff; /* Texto blanco. */
    }

/* Logo secundario, en línea con la descripción. */
.Footer-brand-logo {
    height: 15px; /* Menor que el de la empresa: es secundario. */
    width: auto; /* Sale de la proporción del archivo. */
}

/* Descripción de la empresa. Los nodos de tablet y móvil la traen gris y a 14px, pero se unificó en
   el blanco de escritorio por decisión del usuario. */
.Footer-tagline {
    margin-bottom: 8px; /* Separación con la fila de redes. */
    color: #ffffff; /* Blanco pleno. */
    font-size: 16px; /* Tamaño del diseño. */
    line-height: 1.6; /* Sin unidad, para que acompañe al tamaño. */
}

/* Fila de iconos de redes. Los 12px no están en la escala de Bootstrap, por eso van acá. */
.Footer-social-list {
    gap: 12px; /* Separación del diseño entre círculos. */
}

/* Círculo de cada icono. La forma y el centrado los pone la vista con utilidades de Bootstrap. */
.Footer-social-icon {
    width: 36px; /* Diámetro del círculo. */
    height: 36px; /* Igual al ancho: es lo que lo mantiene circular. */
    background-color: #ffffff; /* LOS ICONOS DEL MÓDULO TIENEN QUE SER OSCUROS: uno blanco no se ve. */
    flex-shrink: 0; /* No se comprime cuando la columna aprieta. */
}

/* --- Columnas de enlaces. --- */

/* Encabezado de columna. Es un button porque en móvil dispara el acordeón, pero acá tiene que verse
   igual que el h4 que reemplazó: de ahí el reset de estilos nativos. */
.Footer-column-title {
    display: block; /* Un button es inline-block; un h4 es de bloque. */
    width: 100%; /* Ocupa el ancho de la columna. */
    background: none; /* Sin fondo. */
    border: none; /* Quita el borde del button. */
    margin: 0 0 16px; /* Separación con la lista, del diseño. */
    padding: 0; /* Sin relleno en escritorio. */
    text-align: left; /* El button centra por defecto. */
    font: inherit; /* Descarta la fuente de sistema del button. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 700; /* Negrita. */
    line-height: 24px; /* Para títulos que envuelven en dos líneas. */
    color: #73acff; /* Azul del rediseño: separa el título de sus enlaces, ahora blancos. */
}

    /* El cursor va aparte y con un selector cargado A PROPÓSITO: el reboot de Bootstrap trae
       [type="button"]:not(:disabled){cursor:pointer}, que pesa más que una clase suelta. */
    button.Footer-column-title.Footer-column-toggle {
        cursor: default; /* Acá el título es solo texto: puntero normal. */
    }

/* Ícono "+"/"−" del acordeón. Solo se ve en móvil, donde el título sí es clickeable. */
.Footer-column-toggle-icon {
    display: none; /* Fuera en escritorio y tablet. */
}

/* Elemento de la lista de enlaces. */
.Footer-link-list li {
    line-height: 24px; /* Interlineado del enlace. */
    margin-bottom: 8px; /* 24 + 8 dan los 32px de paso medidos en el render de escritorio. */
}

    /* El último no lleva separación: dejaría un hueco que desalinearía las columnas entre sí. */
    .Footer-link-list li:last-child {
        margin-bottom: 0; /* Sin hueco al pie. */
    }

/* Enlaces de las columnas y de la barra inferior. SE DECLARAN LOS CINCO ESTADOS: el a:hover de
   Bootstrap le gana a la clase suelta y los pintaría azules y subrayados. */
.Footer-link,
.Footer-link:link,
.Footer-link:visited,
.Footer-link:hover,
.Footer-link:focus,
.Footer-link:active {
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 20px; /* Interlineado que acompaña al del li. */
    text-decoration: none; /* Quita el subrayado del navegador. */
}

/* Color en reposo de los enlaces. */
.Footer-link,
.Footer-link:link,
.Footer-link:visited {
    color: #ffffff; /* Blanco del rediseño, que reemplaza al gris anterior. */
}

    /* Estado activo. El diseño no lo define: se usa el azul de los títulos, el único acento de la
       paleta. Con el enlace ya en blanco, aclararlo más no se percibiría. */
    .Footer-link:hover,
    .Footer-link:focus,
    .Footer-link:active {
        color: #73acff; /* Azul del rediseño. */
    }

/* --- Barra inferior: copyright y avisos legales. --- */

/* Línea de copyright. */
.Footer-copyright {
    color: #ffffff; /* Blanco pleno. */
    font-size: 16px; /* Tamaño del nodo de escritorio. */
    line-height: 1.6; /* Interlineado de lectura. */
}

/* Barra inferior. LA LÍNEA NO CRUZA LA VENTANA: va dentro del contenedor, así que empieza y termina
   con el contenido, como la dibujan los tres nodos nuevos. */
.Footer-bottom-bar {
    margin-top: 16px; /* Separación con la fila de columnas. */
    padding-top: 33px; /* Aire entre la línea y el texto, del diseño de escritorio. */
    /* Los dos bloques bajan ENTEROS a un segundo renglón cuando no entran juntos: sin esto, a 768px
       cada mitad se rompía por dentro y el tercer aviso legal se descolgaba solo. */
    flex-wrap: wrap;
    gap: 12px 24px; /* La primera medida es el aire entre renglones cuando la barra envuelve. */
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* El #1e2939 anterior no se ve sobre el azul. */
}

/* Fila de avisos legales. */
.Footer-legal-links {
    gap: 24px; /* Separación del diseño de escritorio. */
}

/* --- Tablet: hasta 1024px. La marca pasa a ancho completo y las tres columnas se acomodan debajo
   en tercios. No hay acordeón en este rango. --- */
@media (max-width: 1024px) {
    /* Se reasigna la variable y no la propiedad: .Footer-badge lee la misma. */
    .Footer-container {
        --footer-pad: 32px; /* Relleno lateral del nodo de tablet. */
    }

    /* La marca ocupa la fila entera. Se reasignan las TRES propiedades que usa la grilla de
       Bootstrap 5: con una sola, la declaración de .col-3 sigue mandando en las otras dos. */
    .Footer-brand-column {
        flex: 0 0 100%; /* Base de la columna. */
        width: 100%; /* Ancho declarado. */
        max-width: 100%; /* Techo declarado. */
    }

    /* Las tres categorías se reparten la fila siguiente en tercios. */
    .Footer-column {
        flex: 0 0 33.3333%; /* Base de la columna. */
        width: 33.3333%; /* Ancho declarado. */
        max-width: 33.3333%; /* Techo declarado. */
    }

    .Footer-link-list li {
        margin-bottom: 14px; /* La separación entre enlaces sube en este rango. */
    }

    .Footer-bottom-bar {
        padding-top: 20px; /* La barra inferior aprieta su aire. */
    }

    .Footer-legal-links {
        gap: 20px; /* Separación más corta entre avisos. */
    }
}

/* --- Móvil: hasta 500px. Todo se apila. Cada categoría pasa a ser un renglón con línea inferior y
   un "+"/"−", y sus enlaces arrancan colapsados. Footer.js solo alterna "is-open", y este bloque es
   el único lugar del CSS que le da significado visual. Los avisos legales van ARRIBA del
   copyright. --- */
@media (max-width: 500px) {
    .Footer-container {
        --footer-pad: 24px; /* Deshace el 32px del bloque de tablet, que aplica también acá. */
        padding-top: 32px; /* Aire superior del nodo de móvil. */
        padding-bottom: 28px; /* Aire inferior del nodo de móvil. */
    }

    .Footer-badge {
        font-size: 14px; /* La etiqueta baja de tamaño en este rango. */
    }

    .Footer-social-list {
        justify-content: center; /* Centrada, a diferencia de escritorio y tablet. */
    }

    /* Cada categoría a ancho completo. La línea va ABAJO y no arriba, como en el nodo: así la última
       queda separada de los avisos legales y la primera no arrastra una línea de más. */
    .Footer-column {
        flex: 0 0 100%; /* Base de la columna. */
        width: 100%; /* Ancho declarado. */
        max-width: 100%; /* Techo declarado. */
        border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Línea divisoria del acordeón. */
        /* La columna es una grilla de dos filas y LA DEL PANEL ES LA QUE SE ANIMA, de 0fr a 1fr. NO
           se usa max-height: obliga a inventar un techo, y con el que había la animación llegaba al
           final en el 25 % del tiempo. La fila 1fr resuelve al alto REAL. */
        display: grid;
        grid-template-rows: auto 0fr; /* Título con su alto, panel colapsado. */
        transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Suaviza el despliegue. */
    }

        /* Abierta: la fila del panel pasa a ocupar el alto real de su contenido. */
        .Footer-column.is-open {
            grid-template-rows: auto 1fr; /* Panel desplegado. */
        }

    /* El título pasa a ser la cabecera clickeable del acordeón. */
    .Footer-column-title {
        display: flex; /* Texto e ícono en línea. */
        align-items: center; /* Centrados entre sí. */
        justify-content: space-between; /* El "+" queda contra el borde derecho. */
        margin: 0; /* Sin margen: la separación la da el relleno. */
        padding: 16px 0; /* Área de toque cómoda. */
    }

        /* Acá el título SÍ despliega. Repite el selector cargado porque un @media NO agrega peso:
           con la clase suelta, la regla de escritorio le ganaba desde afuera. */
        button.Footer-column-title.Footer-column-toggle {
            cursor: pointer; /* Indica que es accionable. */
        }

    /* Ícono del acordeón. */
    .Footer-column-toggle-icon {
        display: inline-block; /* Visible en este rango. */
        position: relative; /* Origen de las dos barras. */
        width: 12px; /* Lado del ícono. */
        height: 12px; /* Cuadrado. */
        flex-shrink: 0; /* No se comprime. */
    }

        /* Las dos barras del "+", dibujadas y no como un carácter, para poder animar solo una sin
           parpadeo de fuente. */
        .Footer-column-toggle-icon::before,
        .Footer-column-toggle-icon::after {
            content: ""; /* Necesario para que existan. */
            position: absolute; /* Centradas en el ícono. */
            top: 50%; /* Punto de partida del centrado. */
            left: 50%; /* Ídem. */
            background-color: #73acff; /* Acompaña al color del título. */
            transform: translate(-50%, -50%); /* Centrado real. */
        }

        /* Barra horizontal. */
        .Footer-column-toggle-icon::before {
            width: 12px; /* Largo del ícono. */
            height: 1.5px; /* Grosor del trazo. */
        }

        /* Barra vertical, la que se anima. */
        .Footer-column-toggle-icon::after {
            width: 1.5px; /* Grosor del trazo. */
            height: 12px; /* Largo del ícono. */
            /* Misma duración y curva que la fila de la grilla: el "+" que se vuelve "−" y el panel
               que se abre son un solo gesto. */
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

    /* Abierta: la barra vertical se achica a cero y queda el "−". */
    .Footer-column.is-open .Footer-column-toggle-icon::after {
        transform: translate(-50%, -50%) scaleY(0); /* Sin alto. */
    }

    /* Panel de enlaces. El min-height NO ES OPCIONAL: un elemento de grilla no baja de su alto
       mínimo de contenido, así que sin él la fila 0fr no llegaría a cero. */
    .Footer-link-list {
        overflow: hidden; /* Recorta lo que la fila todavía no muestra. */
        min-height: 0; /* Permite que la fila llegue a cero. */
        margin: 0; /* Sin margen propio de la lista. */
    }

        /* El aire bajo el último enlace va como margen del enlace y NO como relleno del panel: como
           relleno se aplicaba de golpe al abrir, fuera de la animación. */
        .Footer-column.is-open .Footer-link-list li:last-child {
            margin-bottom: 16px; /* Aire al pie del panel abierto. */
        }

    /* La barra inferior se apila y pierde la línea: acá ya la aporta el borde de la última
       categoría, y dos seguidas se verían como un doble filete. */
    .Footer-bottom-bar {
        flex-direction: column; /* Copyright y legales apilados. */
        align-items: flex-start !important; /* Le gana al align-items-center de la vista, que pesa igual. */
        border-top: none; /* Sin línea propia. */
        margin-top: 0; /* Sin separación extra. */
        padding-top: 16px; /* Aire con la última categoría. */
        gap: 10px; /* Separación entre los dos bloques. */
    }

    /* Los avisos legales van ARRIBA del copyright. Con order y no reordenando el HTML, porque en los
       otros dos rangos el orden visual tiene que ser el contrario. */
    .Footer-legal-links {
        order: -1; /* Antes del copyright. */
        flex-direction: column; /* Uno debajo del otro. */
        gap: 10px; /* Separación del diseño entre avisos apilados. */
    }

    .Footer-copyright {
        font-size: 13px; /* Acompaña a los legales, que en este rango son de 13px. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */