/* IntroTextSection.css — Bloque de texto introductorio. Nodos 1535:27216 (PC), 1535:27541 (tablet)
   y 1535:27865 (mobile). Tipografía: site.css.
   Los tres frames son el mismo dibujo escalado (rellenos al 3,75 % del ancho), pero LAS TIPOGRAFÍAS
   NO SIGUEN ESA ESCALA: el título de tablet queda más chico que el de mobile, y se corrige con clamp. */

/* --- Sección: fondo blanco a sangre completa. --- */
.IntroTextSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding-block: 50px; /* Aire arriba y abajo, simétrico. */
    padding-inline: max(14px, 3.75%); /* 3,75 % del diseño, con piso para pantallas muy angostas. */
}

/* Contenido centrado dentro del techo del sitio. */
.IntroTextSection-container {
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Etiqueta sobre el título. Nace oculta: el editor decide encenderla. --- */
.IntroTextSection-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del diseño. */
    margin: 0 0 16px; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado naranja del diseño. El hex va literal: NO es ninguno de los colores de la paleta. */
.IntroTextSection-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    background-color: #ff5a1f; /* Naranja del diseño. */
}

/* Texto de la etiqueta. */
.IntroTextSection-eyebrow-text {
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Token de la paleta. */
}

/* --- Título de la sección. --- */
.IntroTextSection-title {
    margin: 0 0 24px; /* Solo separación con el cuerpo. */
    font-size: clamp(24px, 3vw, 36px); /* El 3vw toca los 36px del diseño en 1201px. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Cuerpo de texto. En escritorio los párrafos van pegados: el diseño los muestra como un
   bloque continuo, no como párrafos sueltos. --- */
.IntroTextSection-body {
    margin: 0; /* Sin margen propio: la separación la dan el título y la sección. */
}

/* Un párrafo del cuerpo. */
.IntroTextSection-paragraph {
    margin: 0; /* Sin separación entre párrafos. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.65); /* Gris de cuerpo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Tablet: hasta 1024px. Cubre el iPad Pro en vertical. El cuerpo pasa a dos columnas. --- */
@media (max-width: 1024px) {

    .IntroTextSection {
        padding-block: 30px; /* Menos aire vertical. */
    }

    .IntroTextSection-eyebrow {
        margin-bottom: 10px; /* Separación más corta con el título. */
    }

    .IntroTextSection-title {
        margin-bottom: 14px; /* Separación más corta con el cuerpo. */
        font-size: clamp(19px, 2.47vw, 25px); /* Tamaño del nodo de tablet. */
    }

    /* Con columnas CSS y no con flex: así la cantidad de párrafos que cargue el editor no cambia la
       cantidad de columnas. */
    .IntroTextSection-body {
        column-count: 2; /* Dos columnas, como el diseño de tablet. */
        column-gap: 4%; /* Separación del diseño, medida contra el ancho del contenido. */
    }

    .IntroTextSection-paragraph {
        break-inside: avoid; /* Ningún párrafo se parte entre columnas. */
        font-size: clamp(13px, 1.69vw, 15px); /* Tamaño del nodo de tablet. */
    }
}

/* --- Mobile: hasta 500px. Una columna. Va después de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {

    .IntroTextSection {
        padding-block: 15px; /* Aire vertical mínimo. */
    }

    .IntroTextSection-eyebrow {
        margin-bottom: 5px; /* Separación mínima con el título. */
    }

    .IntroTextSection-title {
        margin-bottom: 7px; /* Separación mínima con el cuerpo. */
        font-size: 20px; /* Tamaño del nodo de mobile. */
    }

    .IntroTextSection-body {
        column-count: 1; /* Una sola columna: el diseño apila los párrafos. */
    }

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

    /* En mobile los párrafos SÍ se separan entre sí, a diferencia de escritorio. */
    .IntroTextSection-paragraph + .IntroTextSection-paragraph {
        margin-top: 12px; /* Separación del diseño. */
    }
}