/* SocialFollowStrip.css — Franja "Síguenos": invitación y botones de redes sociales.
   Nodos 2611:38105 (PC, contenido de 1184), 2611:38402 (tablet, mesa de 768) y 2611:38677 (mobile,
   mesa de 375).
   ESCRITORIO: texto a la izquierda y botones rectangulares a la derecha, en una fila. TABLET: todo
   apilado y botones en píldora alineados a la izquierda. MOBILE: botones centrados. El eyebrow es el
   estándar del proyecto en los tres rangos (los nodos de tablet y mobile traen un círculo celeste,
   mismo criterio que el resto de los widgets). */

/* --- Sección: franja con línea arriba y abajo. --- */
.SocialFollowStrip {
    --SocialFollowStrip-ink: #0f0f12; /* Casi negro del diseño. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 34px 48px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    border-top: 1px solid rgba(15, 15, 18, 0.1); /* Línea del nodo. */
    border-bottom: 1px solid rgba(15, 15, 18, 0.1); /* Línea del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--SocialFollowStrip-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio: texto y botones en una fila. */
.SocialFollowStrip-container {
    display: flex; /* En fila. */
    align-items: center; /* Centrados en la vertical. */
    gap: 32px; /* Separación del nodo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

.SocialFollowStrip-text {
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 7px; /* Separación del nodo. */
    flex: 1 1 0; /* Toma el ancho sobrante. */
    min-width: 0; /* Deja que el texto envuelva. */
}

/* --- Eyebrow estándar. --- */
.SocialFollowStrip-eyebrow {
    margin: 0; /* La separación la da el gap. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.SocialFollowStrip-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

.SocialFollowStrip-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 24px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.25; /* Interlineado de titular. */
    color: var(--SocialFollowStrip-ink);
}

.SocialFollowStrip-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 14px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

/* --- Botones de redes. --- */
.SocialFollowStrip-networks {
    display: flex; /* En fila. */
    flex-wrap: wrap; /* Bajan de renglón si no entran. */
    align-items: center; /* Centrados en la vertical. */
    gap: 10px; /* Separación del nodo. */
    flex: 0 1 auto; /* Su ancho natural; cede si no entra. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

/* Botón circular con SOLO el ícono (pedido del cliente, 2026-10-16): círculo azul noche de 40 px
   con el ícono blanco al centro. El nombre de la red queda oculto a la vista (ver -label). */
.SocialFollowStrip-network {
    display: inline-flex; /* Centra el ícono. */
    align-items: center; /* Ídem. */
    justify-content: center; /* Ídem. */
    width: 40px; /* Diámetro del círculo. */
    height: 40px; /* Ídem. */
    padding: 0; /* Sin relleno: el ícono va centrado. */
    background-color: var(--color-cool-neutral-02); /* #243746, azul noche. */
    border: 0; /* Sin borde. */
    border-radius: 50%; /* Círculo. */
    color: #ffffff; /* Ícono blanco. */
    text-decoration: none; /* Sin subrayado. */
    transition: transform 0.2s ease-out, background-color 0.2s ease-out; /* Realce. */
}

/* Nombre de la red: oculto a la vista, pero lo lee el lector de pantalla (nombre del enlace). */
.SocialFollowStrip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    /* Realce estándar de botones del proyecto. :active es el que lo hace existir en táctil.
       Bootstrap colorea y subraya los enlaces con el puntero encima. */
    .SocialFollowStrip-network:hover,
    .SocialFollowStrip-network:focus-visible,
    .SocialFollowStrip-network:active {
        transform: scale(1.05);
        background-color: var(--SocialFollowStrip-ink); /* Se oscurece un tono. */
        color: #ffffff;
        text-decoration: none;
    }

    .SocialFollowStrip-network:focus-visible {
        outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco. */
        outline-offset: 2px;
    }

.SocialFollowStrip-icon {
    flex: 0 0 auto; /* No se comprime. */
    width: 20px; /* Tamaño del ícono dentro del círculo. */
    height: 20px; /* Cuadrado. */
    fill: currentColor; /* Formas rellenas, del color del botón. */
}

.SocialFollowStrip-icon-stroke {
    fill: none; /* Los trazos van sin relleno. */
    stroke: currentColor; /* Del color del botón. */
    stroke-width: 2; /* Grosor del trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértices redondeados. */
}

/* --- Tablet (hasta 1024px): todo apilado y botones en píldora. --- */
@media (max-width: 1024px) {
    .SocialFollowStrip {
        padding: 36px 32px; /* Rellenos del nodo. */
        border-color: rgba(0, 0, 0, 0.08); /* Línea del nodo de tablet. */
    }

    .SocialFollowStrip-container {
        flex-direction: column; /* Texto arriba y botones abajo. */
        align-items: stretch; /* Ambos a todo el ancho. */
        gap: 16px; /* Separación del nodo. */
    }

    .SocialFollowStrip-text {
        flex: 0 0 auto; /* Ya no comparte fila. */
        gap: 16px; /* Separación del nodo. */
    }

    .SocialFollowStrip-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .SocialFollowStrip-title {
        font-size: min(2.6042vw, 20px); /* 20px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
    }

    .SocialFollowStrip-description {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        color: rgba(15, 15, 18, 0.6); /* Gris del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px): botones centrados. --- */
@media (max-width: 500px) {
    .SocialFollowStrip {
        padding: 28px 20px; /* Rellenos del nodo. */
    }

    .SocialFollowStrip-title {
        font-size: min(4.5333vw, 17px); /* 17px sobre la mesa de 375. */
    }

    .SocialFollowStrip-networks {
        justify-content: center; /* Centrados, como el nodo. */
    }
}

/* Movimiento reducido: los botones no se agrandan. */
@media (prefers-reduced-motion: reduce) {
    .SocialFollowStrip-network {
        transition: none;
    }
}