/* ============================================================
   LegalLinksSection.css — Estilos propios del widget LegalLinksSection
   Bticino Mx · Sitefinity Renderer
   ============================================================

   Widget GENERAL: se identificó por primera vez en Corporativo (nodo "SEC · Legales", 1535:30447
   PC, 1535:30007 tablet, 1535:30220 mobile del Figma), pero no es exclusivo de esa vertiente.

   NO se declara font-family: la resuelve site.css reasignando --bs-body-font-family en :root.

   En PC las tarjetas CRECEN para repartirse todo el ancho de la fila (3 columnas iguales, sin
   dejar espacio vacío). En tablet y mobile mantienen el ancho fijo original (381px y 280px) y se
   acomodan solas con flex-wrap -- por eso en esos rangos caen a una sola columna.

   Breakpoints propios: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px (hereda
   desktop), desktop de 1201px en adelante.
   ============================================================ */

.LegalLinksSection {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 56px 48px;
}

/* Contenido centrado dentro del techo del sitio, como el resto de las secciones. */
.LegalLinksSection-container {
    max-width: var(--container-max-width, 1600px);
    margin: 0 auto;
}

.LegalLinksSection-header {
    margin-bottom: 24px;
}

.LegalLinksSection-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #243746;
}

.LegalLinksSection-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: none;
    background-color: #243746;
}

.LegalLinksSection-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    line-height: 1.2;
    color: #0f0f12;
}

.LegalLinksSection-description {
    margin: 10px 0 0;
    max-width: min(760px, 100%);
    font-size: 16px;
    font-weight: 400; /* Acumin Pro Regular del diseño. */
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.7);
}

.LegalLinksSection-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.LegalLinksSection-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 0; /* Crecen parejo para repartirse todo el ancho de la fila en PC. */
    color: inherit;
    text-decoration: none;
}

    /* LOS CUATRO ESTADOS SE DECLARAN JUNTOS: bootstrap trae "a:hover { text-decoration: underline;
       ... }", que con una clase sola le gana por especificidad y subrayaría el título al pasar el
       mouse. */
    .LegalLinksSection-card,
    .LegalLinksSection-card:hover,
    .LegalLinksSection-card:focus,
    .LegalLinksSection-card:visited {
        color: inherit;
        text-decoration: none;
    }

.LegalLinksSection-card-fillet {
    width: 100%;
    height: 1px;
    background-color: rgba(15, 15, 18, 0.16);
}

.LegalLinksSection-card-title {
    font-size: 16px;
    font-weight: 600; /* Acumin Pro Semibold del diseño. */
    line-height: 1.35;
    color: #0f0f12;
}

.LegalLinksSection-card-description {
    font-size: 16px;
    font-weight: 400; /* Acumin Pro Regular del diseño. */
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.7);
}

.LegalLinksSection-card-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600; /* Acumin Pro Semibold del diseño. */
    color: #243746;
    transition: gap 0.2s ease-in-out;
}

    .LegalLinksSection-card:hover .LegalLinksSection-card-cta,
    .LegalLinksSection-card:focus-visible .LegalLinksSection-card-cta {
        gap: 10px; /* La flecha se corre un poco al pasar el mouse, sin animar transform. */
    }

    .LegalLinksSection-card:focus-visible {
        outline: 2px solid #243746;
        outline-offset: 4px;
    }

.LegalLinksSection-card-cta-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* Ancho fijo original: acá ya no hay 3 columnas, así que no crecen a lo ancho de la fila. */
    .LegalLinksSection-card {
        flex: 1 1 381px;
        max-width: 381px;
    }
}

@media (max-width: 500px) {
    .LegalLinksSection {
        padding: 40px 48px 56px;
    }

    .LegalLinksSection-card {
        flex-basis: 280px;
        max-width: 280px;
    }
}

/* El marcador de posición que este widget muestra en el editor cuando no tiene contenido NO se
   estiliza acá: usa las clases WidgetPlaceholder de site.css, comunes a todos los widgets. */