/* HighlightPanelSection.css -- Encabezado y paneles grises con imagen, título, descripción y botón.
   Nodos 3567:11146 (PC) y 3567:11267 (mobile); tablet sin nodo. Medidas del estándar del proyecto:
   rellenos de TextImageSection, encabezado de InfoCardsSection y botón de ApplicationMatrixGrid.
   Tipografía base: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.HighlightPanelSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    padding: 32px 48px; /* Arriba y abajo, y lados. */
}

/* Contenido centrado dentro del techo del sitio: encabezado y paneles apilados. */
.HighlightPanelSection-container {
    display: flex; /* Encabezado y lista en columna. */
    flex-direction: column; /* En vertical. */
    gap: 24px; /* Separación del diseño. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Encabezado. --- */
.HighlightPanelSection-header {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 9px; /* Separación del diseño. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho de su columna. */
.HighlightPanelSection-header > *,
.HighlightPanelSection-text > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.HighlightPanelSection-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.HighlightPanelSection-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Texto de la etiqueta: 14px estándar; el nodo dice 11px. */
.HighlightPanelSection-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título de la sección: toca los 36px estándar al piso del rango de escritorio. */
.HighlightPanelSection-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: clamp(24px, 3vw, 36px); /* 36 / 1200 * 100. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Cierre del diseño. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Lista de paneles. --- */
.HighlightPanelSection-list {
    display: flex; /* Paneles apilados. */
    flex-direction: column; /* En vertical. */
    gap: 24px; /* Separación entre paneles. */
}

/* --- Panel: imagen y textos en dos columnas, un tercio y dos tercios. --- */
.HighlightPanelSection-panel {
    display: grid; /* Dos columnas. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* Imagen y textos. */
    grid-template-areas: "media text"; /* Imagen a la izquierda. */
    align-items: center; /* Imagen y textos centrados entre sí. */
    gap: 32px; /* Separación de imagen y textos. */
    margin: 0; /* Sin margen propio. */
    padding: 32px; /* Relleno interno estándar. */
    box-sizing: border-box; /* El borde entra en el tamaño. */
    background-color: #f8f7f5; /* Gris claro del diseño. */
    border: 1px solid transparent; /* Invisible: el panel blanco mide lo mismo que el gris. */
    border-radius: 16px; /* Esquinas del diseño. */
}

/* Sin fondo gris: blanco con el contorno estándar de tarjeta. */
.HighlightPanelSection-panel--white {
    background-color: #ffffff; /* Blanco. */
    border-color: rgba(15, 15, 18, 0.14); /* Contorno tenue estándar de tarjeta. */
}

/* Imagen a la derecha: se invierten las columnas. */
.HighlightPanelSection-panel--image-right {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* Textos e imagen. */
    grid-template-areas: "text media"; /* Imagen a la derecha. */
}

/* --- Imagen: recuadro con la proporción 292:190 del nodo. --- */
.HighlightPanelSection-media {
    grid-area: media; /* Su columna. */
    position: relative; /* Origen de la imagen y del degradado. */
    align-self: center; /* NO stretch: con aspect-ratio WebKit la deja en 0x0. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    aspect-ratio: 292 / 190; /* Proporción del nodo. */
    border-radius: 10px; /* Esquinas del diseño. */
    overflow: hidden; /* La imagen respeta las esquinas. */
}

/* La imagen cubre el recuadro sin deformarse. */
.HighlightPanelSection-image {
    position: absolute; /* Ocupa el recuadro entero. */
    inset: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Recorta en vez de deformar. */
    display: block; /* Sin el hueco de línea de un img en línea. */
}

/* Degradado oscuro del nodo "scrim · legibilidad", opcional por panel. */
.HighlightPanelSection-gradient {
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre el recuadro entero. */
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Paradas del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Textos del panel. --- */
.HighlightPanelSection-text {
    grid-area: text; /* Su columna. */
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* El botón solo del ancho de su texto. */
    gap: 16px; /* Separación estándar del bloque de texto. */
    min-width: 0; /* No fuerza el ancho de la columna. */
}

/* Etiqueta en píldora del nodo 4367:71292: tipografía de la etiqueta estándar; el nodo dice 9,5px. */
.HighlightPanelSection-badge {
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
    padding: 6px 12px; /* Relleno del nodo, en proporción al cuerpo estándar. */
    border-radius: 999px; /* Píldora. */
    background-color: var(--HighlightPanelSection-badge-bg, var(--color-cool-neutral-02)); /* Color de la paleta; sin elegir, azul de marca. */
    font-size: 12px; /* Etiqueta chica estándar. */
    font-weight: 600; /* Semibold del nodo. */
    line-height: 1.3; /* Interlineado de la etiqueta. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--HighlightPanelSection-badge-ink, #ffffff); /* Blanco o negro, elegido por el editor; sin elegir, blanco. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título del panel: 28px estándar del título de elemento; el nodo dice 26px. */
.HighlightPanelSection-panel-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 28px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.29; /* 36px sobre 28px, estándar. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción: 16px estándar; el nodo dice 14px. */
.HighlightPanelSection-description {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 16px; /* Tamaño estándar. */
    font-weight: 400; /* Regular. */
    line-height: 1.625; /* 26px sobre 16px, estándar. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Fila del botón y la nota: la nota baja de renglón antes que apretar el botón. --- */
.HighlightPanelSection-actions {
    display: flex; /* Botón y nota en línea. */
    flex-wrap: wrap; /* La nota baja si no entra. */
    align-items: center; /* Centrados entre sí. */
    gap: 12px 16px; /* Separación vertical y horizontal. */
    margin-top: 8px; /* Aire con la descripción. */
}

/* Nota al lado del botón, del nodo 4367:71299: 14px estándar; el nodo dice 12px. */
.HighlightPanelSection-note {
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
    min-width: 0; /* Puede achicarse. */
    font-size: 14px; /* Tamaño estándar del texto secundario. */
    font-weight: 400; /* Regular. */
    line-height: 1.5; /* Interlineado del texto secundario. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar, legible sobre el gris del panel. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Botón: estándar de ApplicationMatrixGrid; el nodo dice 13px. Los cinco estados le ganan al
   a:hover de Bootstrap. --- */
.HighlightPanelSection-button,
.HighlightPanelSection-button:link,
.HighlightPanelSection-button:visited,
.HighlightPanelSection-button:hover,
.HighlightPanelSection-button:focus,
.HighlightPanelSection-button:active {
    color: var(--HighlightPanelSection-button-ink, #ffffff); /* Blanco o negro, elegido por el editor; sin elegir, blanco. */
    text-decoration: none; /* Nunca subrayado. */
}

.HighlightPanelSection-button {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    margin-inline-end: 4px; /* Reserva los 4px que crece en hover: la nota de al lado no se mueve. */
    max-width: min(calc(100% - 4px), 360px); /* Tope de ancho: ~30 caracteres por renglón; nunca más que la columna. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    min-height: 54px; /* Alto estándar con un renglón; crece con el segundo. */
    padding: 12px 30px; /* Rellenos estándar. */
    box-sizing: border-box; /* El relleno entra en el alto. */
    border-radius: 6px; /* Radio estándar. */
    background-color: var(--HighlightPanelSection-button-bg, var(--color-cool-neutral-02)); /* Color de la paleta; sin elegir, azul de marca. */
    font-size: 18px; /* Tamaño estándar. */
    font-weight: 400; /* Regular. */
    line-height: 1.3; /* Interlineado del botón. */
    text-align: left; /* La flecha queda al final del texto, no contra el borde. */
    /* Capa propia: evita la raya de repintado al agrandarse con el realce. */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.2s ease-out, gap 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Realce, flecha, reserva y tope al mismo ritmo. */
}

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.HighlightPanelSection-button-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Realce estándar de botones del proyecto. :active lo hace existir en táctil. */
.HighlightPanelSection-button:hover,
.HighlightPanelSection-button:focus-visible,
.HighlightPanelSection-button:active {
    transform: translateZ(0) scale(1.05); /* Acercamiento sutil. */
}

/* La flecha se corre al abrir la separación, sin animar transform. */
.HighlightPanelSection-button:hover,
.HighlightPanelSection-button:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco. */
    margin-inline-end: 0; /* Cede la reserva: el ancho total no cambia. */
    max-width: min(100%, 364px); /* El tope crece los 4px de la flecha: el texto no se corre. */
}

/* Anillo de foco visible sobre el gris. */
.HighlightPanelSection-button:focus-visible {
    outline: 2px solid #429cde; /* Azul estándar del foco. */
    outline-offset: 2px; /* Separado del botón. */
}

/* Flecha estándar de LegalLinksSection. */
.HighlightPanelSection-button-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Dirección elegida en el diseñador, como DownloadCardGrid: el mismo dibujo girado. --- */
.HighlightPanelSection--arrow-down .HighlightPanelSection-button-arrow {
    --HighlightPanelSection-arrow-turn: 90deg; /* Hacia abajo. */
}

.HighlightPanelSection--arrow-up .HighlightPanelSection-button-arrow {
    --HighlightPanelSection-arrow-turn: -90deg; /* Hacia arriba. */
}

.HighlightPanelSection--arrow-left .HighlightPanelSection-button-arrow {
    --HighlightPanelSection-arrow-turn: 180deg; /* Hacia la izquierda. */
}

/* Girada: avanza hacia donde apunta. El translateX va después del giro, así sigue su dirección. */
.HighlightPanelSection--arrow-down .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-up .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-left .HighlightPanelSection-button-arrow {
    transform: rotate(var(--HighlightPanelSection-arrow-turn)) translateX(0); /* Reposo. */
    transition: transform 0.2s ease-in-out; /* Mismo ritmo que la animación estándar. */
}

.HighlightPanelSection--arrow-down .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-down .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-up .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-up .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-left .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
.HighlightPanelSection--arrow-left .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow {
    transform: rotate(var(--HighlightPanelSection-arrow-turn)) translateX(4px); /* Los mismos 4px del estándar. */
}

/* Girada o sin flecha, el botón no crece: la separación, la reserva y el tope quedan como en reposo. */
.HighlightPanelSection--arrow-down .HighlightPanelSection-button:hover,
.HighlightPanelSection--arrow-down .HighlightPanelSection-button:focus-visible,
.HighlightPanelSection--arrow-up .HighlightPanelSection-button:hover,
.HighlightPanelSection--arrow-up .HighlightPanelSection-button:focus-visible,
.HighlightPanelSection--arrow-left .HighlightPanelSection-button:hover,
.HighlightPanelSection--arrow-left .HighlightPanelSection-button:focus-visible,
.HighlightPanelSection--arrow-none .HighlightPanelSection-button:hover,
.HighlightPanelSection--arrow-none .HighlightPanelSection-button:focus-visible {
    gap: 6px; /* Separación de reposo. */
    margin-inline-end: 4px; /* La reserva se queda: la nota de al lado no se mueve. */
    max-width: min(calc(100% - 4px), 360px); /* El tope no crece. */
}

/* --- Tablet: hasta 1024px. Sin nodo: dos columnas iguales y medidas intermedias. --- */
@media (max-width: 1024px) {

    .HighlightPanelSection {
        padding: 32px 40px; /* Arriba y abajo, y lados de tablet. */
    }

    .HighlightPanelSection-container {
        gap: 20px; /* Separación de tablet. */
    }

    .HighlightPanelSection-header {
        gap: 6px; /* Separación de tablet. */
    }

    .HighlightPanelSection-list {
        gap: 20px; /* Separación entre paneles de tablet. */
    }

    .HighlightPanelSection-panel,
    .HighlightPanelSection-panel--image-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Columnas iguales. */
        gap: 24px; /* Separación de tablet. */
        padding: 24px; /* Relleno de tablet. */
    }

    /* 28px a 768px y se achica por debajo para no desbordar la columna. */
    .HighlightPanelSection-panel-title {
        font-size: clamp(22px, 3.65vw, 28px); /* 3,65vw = 28px sobre 768px. */
    }
}

/* --- Mobile: hasta 500px. Una columna, imagen siempre arriba como en el nodo. --- */
@media (max-width: 500px) {

    .HighlightPanelSection {
        padding: 24px 20px; /* Arriba y abajo, y lados de mobile. */
    }

    .HighlightPanelSection-title {
        font-size: 24px; /* Tamaño del nodo de mobile. */
    }

    .HighlightPanelSection-list {
        gap: 16px; /* Separación entre paneles de mobile. */
    }

    .HighlightPanelSection-panel,
    .HighlightPanelSection-panel--image-right {
        grid-template-columns: minmax(0, 1fr); /* Una sola columna. */
        grid-template-areas: "media" "text"; /* Imagen arriba, en los dos lados. */
        gap: 16px; /* Separación del nodo. */
        padding: 20px; /* Relleno de mobile. */
    }

    .HighlightPanelSection-panel-title {
        font-size: 24px; /* Tamaño de mobile estándar. */
    }

    .HighlightPanelSection-text {
        gap: 12px; /* Separación de mobile. */
    }

    .HighlightPanelSection-actions {
        margin-top: 4px; /* Aire de mobile. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {

    .HighlightPanelSection-button {
        transition: none; /* Sin interpolación. */
    }

    .HighlightPanelSection-button:hover,
    .HighlightPanelSection-button:focus-visible,
    .HighlightPanelSection-button:active {
        transform: translateZ(0); /* Sin acercamiento. */
        gap: 6px; /* La flecha no se corre. */
        margin-inline-end: 4px; /* La reserva se queda. */
        max-width: min(calc(100% - 4px), 360px); /* El tope no crece. */
    }

    /* La flecha girada tampoco avanza. */
    .HighlightPanelSection--arrow-down .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-up .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-left .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-down .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-down .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-up .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-up .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-left .HighlightPanelSection-button:hover .HighlightPanelSection-button-arrow,
    .HighlightPanelSection--arrow-left .HighlightPanelSection-button:focus-visible .HighlightPanelSection-button-arrow {
        transition: none; /* Sin interpolación. */
        transform: rotate(var(--HighlightPanelSection-arrow-turn)) translateX(0); /* Queda en reposo. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */