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

   Widget GENERAL: cabecera de sección simple, sin imagen -- se identificó por primera vez en
   Corporativo (nodo "SEC · Título de página", 1535:30299 PC, 1535:29864 tablet, 1535:30072 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.

   A diferencia de otros Hero del proyecto, acá el tamaño de letra SÍ cambia por dispositivo -- el
   Figma real trae un tamaño distinto en cada uno de los tres rangos, no un valor fluido.

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

.PageTitleSection {
    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. */
.PageTitleSection-container {
    max-width: var(--container-max-width, 1600px);
    margin: 0 auto;
}

.PageTitleSection-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700; /* Archivo Bold del diseño. */
    color: #243746;
}

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

.PageTitleSection-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.PageTitleSection-title-line {
    margin: 0;
    font-size: 44px;
    font-weight: 400; /* Archivo Regular del diseño. */
    line-height: 1.2;
    color: rgba(15, 15, 18, 0.85);
}

/* Línea 2 del título: más grande y con más peso que la línea 1, y en el azul oscuro de marca en
   vez del casi-negro de la línea 1. */
.PageTitleSection-title-line--highlight {
    font-size: 56px;
    font-weight: 900; /* Acumin Pro Black del diseño. */
    color: #243746;
}

.PageTitleSection-description {
    margin: 18px 0 0;
    max-width: min(820px, 100%);
    font-size: 16px;
    font-weight: 400; /* Archivo Regular del diseño. */
    line-height: 26px;
    color: rgba(15, 15, 18, 0.6);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------
   El tamaño de letra del título achica por rango, siguiendo el Figma real de cada uno -- no es un
   clamp() continuo entre PC y tablet/mobile.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .PageTitleSection-title {
        gap: 11px;
    }

    .PageTitleSection-title-line {
        font-size: 36px;
    }

    .PageTitleSection-title-line--highlight {
        font-size: 48px;
    }
}

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

    .PageTitleSection-title-line {
        font-size: 25px;
    }

    .PageTitleSection-title-line--highlight {
        font-size: 44px;
    }
}

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