/* CompanyOverviewSection.css — Sección "sobre la compañía": título, párrafos, cifras y enlace.
   Nodos 2611:37901 (PC, contenido de 1184), 2611:38215 (tablet, mesa de 768) y 2611:38491 (mobile,
   mesa de 375).
   ESCRITORIO: párrafos en dos columnas y hasta 4 cifras por fila. TABLET Y MOBILE: párrafos uno
   debajo del otro y 2 cifras por fila. El eyebrow es el estándar del proyecto en los tres rangos
   (decisión del usuario: los nodos de tablet y mobile traían un círculo celeste). */

/* --- Sección. --- */
.CompanyOverviewSection {
    --CompanyOverviewSection-stat-columns: 4; /* Cifras por fila en escritorio. */
    --CompanyOverviewSection-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: 64px 48px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--CompanyOverviewSection-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.CompanyOverviewSection-container {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada bloque con su ancho. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Eyebrow estándar. --- */
.CompanyOverviewSection-eyebrow {
    margin: 0 0 16px; /* Separación del nodo hasta el título. */
    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. */
}

.CompanyOverviewSection-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. */
}

/* --- Título: 44px en el piso del rango de escritorio (1200px), con techo de ancho del nodo. --- */
.CompanyOverviewSection-title {
    max-width: 940px; /* Ancho del bloque de título del nodo: corta en dos renglones. */
    margin: 0 0 24px; /* Separación del nodo hasta los párrafos. */
    font-size: clamp(32px, 3.6667vw, 44px); /* 44 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.14; /* 50px sobre 44px. */
    letter-spacing: -0.025em; /* -1.1px sobre 44px. */
    color: var(--CompanyOverviewSection-ink);
}

/* --- Párrafos: dos columnas iguales en escritorio. --- */
.CompanyOverviewSection-paragraphs {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas del nodo. */
    gap: 24px 48px; /* 48 entre columnas, como el nodo. */
    width: 100%; /* Ancho completo. */
    margin-bottom: 30px; /* Separación del nodo hasta las cifras. */
}

.CompanyOverviewSection-paragraph {
    margin: 0; /* Sin margen propio. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.45; /* Interlineado de lectura. */
    letter-spacing: -0.03em; /* -0.48px sobre 16px. */
    color: rgba(15, 15, 18, 0.65); /* Gris del nodo. */
}

/* --- Cifras: hasta 4 por fila; la última fila incompleta queda a la izquierda. --- */
.CompanyOverviewSection-stats {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(var(--CompanyOverviewSection-stat-columns), minmax(0, 1fr)); /* Columnas iguales. */
    gap: 20px 24px; /* Separación entre cifras. */
    width: 100%; /* Ancho completo. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    margin: 0 0 22px; /* Separación del nodo hasta el enlace. */
    padding: 26px 32px; /* Rellenos del bloque "datos" del nodo. */
    list-style: none; /* Sin viñetas. */
}

.CompanyOverviewSection-stat {
    display: flex; /* Valor y texto apilados. */
    flex-direction: column; /* En columna. */
    gap: 4px; /* Separación del nodo. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.CompanyOverviewSection-stat-value {
    font-size: 32px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.1; /* Compacto. */
    letter-spacing: -0.015em; /* -0.48px sobre 32px. */
    color: var(--CompanyOverviewSection-ink);
}

.CompanyOverviewSection-stat-caption {
    font-size: 12.5px; /* Tamaño del nodo. */
    line-height: 1.3; /* Compacto. */
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

/* --- Enlace final. --- */
/* TEXTO CORRIDO y no flex: con flex, un texto de dos renglones tomaba todo el ancho y la flecha
   quedaba contra el borde derecho, separada del texto (bug de QA en mobile). Así la flecha sigue a la
   última palabra, como en tablet y desktop. */
.CompanyOverviewSection-link {
    display: inline-block; /* Bloque del ancho de su texto. */
    max-width: 100%; /* No desborda. */
    line-height: 1.4; /* Interlineado si ocupa dos renglones. */
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    font-size: 13.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
    text-decoration: none; /* Sin subrayado. */
}

    .CompanyOverviewSection-link:hover,
    .CompanyOverviewSection-link:focus-visible {
        color: var(--color-cool-neutral-02); /* Bootstrap colorea los enlaces con el puntero encima. */
        text-decoration: none; /* Ídem con el subrayado. */
    }

/* Última palabra + flecha: sin corte de línea entre ellas, así la flecha nunca queda sola. */
.CompanyOverviewSection-link-tail {
    white-space: nowrap;
}

.CompanyOverviewSection-link-arrow {
    display: inline-block; /* En la línea del texto. */
    vertical-align: -2px; /* Centrada con las minúsculas del texto. */
    margin-left: 8px; /* Separación entre texto y flecha. */
    width: 14px; /* Tamaño del glifo del nodo. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Del color del texto. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); /* Realce. */
}

/* La flecha empuja hacia adelante con el puntero encima o el foco del teclado. */
.CompanyOverviewSection-link:hover .CompanyOverviewSection-link-arrow,
.CompanyOverviewSection-link:focus-visible .CompanyOverviewSection-link-arrow {
    transform: translateX(3px);
}

/* --- Tablet (hasta 1024px): todo apilado, 2 cifras por fila, 20px entre bloques. --- */
@media (max-width: 1024px) {
    .CompanyOverviewSection {
        --CompanyOverviewSection-stat-columns: 2; /* Cifras por fila del nodo. */
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    .CompanyOverviewSection-eyebrow {
        margin-bottom: 20px; /* Separación del nodo. */
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .CompanyOverviewSection-title {
        max-width: none; /* A todo el ancho, como el nodo. */
        margin-bottom: 20px; /* Separación del nodo. */
        font-size: min(3.6458vw, 28px); /* 28px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: 1.25; /* Interlineado de titular. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

    .CompanyOverviewSection-paragraphs {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
        gap: 14px; /* Separación del nodo. */
        margin-bottom: 20px; /* Separación del nodo. */
    }

    .CompanyOverviewSection-paragraph {
        font-size: 14px; /* Tamaño del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
        color: rgba(15, 15, 18, 0.75); /* Gris del nodo de tablet. */
    }

    .CompanyOverviewSection-stats {
        gap: 20px 16px; /* Separación del nodo. */
        margin-bottom: 20px; /* Separación del nodo. */
        padding: 0; /* Sin el recuadro de escritorio. */
    }

    .CompanyOverviewSection-stat-value {
        font-size: 28px; /* Tamaño del nodo de tablet. */
        font-weight: 700; /* Bold del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

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

    .CompanyOverviewSection-link {
        font-size: 13px; /* Tamaño del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px). --- */
@media (max-width: 500px) {
    .CompanyOverviewSection {
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .CompanyOverviewSection-title {
        font-size: min(5.8667vw, 22px); /* 22px sobre la mesa de 375. */
    }

    .CompanyOverviewSection-paragraph {
        font-size: 13px; /* Tamaño del nodo de mobile. */
    }

    .CompanyOverviewSection-stat-value {
        font-size: 24px; /* Tamaño del nodo de mobile. */
    }
}

/* Movimiento reducido: la flecha no se mueve. */
@media (prefers-reduced-motion: reduce) {
    .CompanyOverviewSection-link-arrow {
        transition: none;
    }
}