/* ProfileSelectorList.css — "Elige tu perfil". Nodos 820:37149 (PC), 820:41706 (tablet),
   820:41604 (mobile); prototipo 139:27204 (250 ms ease-in-out). Tipografía: site.css.
   Los tres rangos pintan el MISMO DOM: escritorio son filas con foto, numeral, acento, píldoras y
   flecha; tablet y mobile son tarjetas sin esas piezas. EL ESTADO DESTACADO ES EL HOVER.
   El acercamiento de la foto NO está en el prototipo: es un pedido del usuario. */

/* --- Sección: fondo blanco a sangre completa. --- */
.ProfileSelectorList {
    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: clamp(36px, 4.375vw, 56px) 0; /* 56px del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio. */
.ProfileSelectorList-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    padding: 0 clamp(20px, 3.75vw, 48px); /* 48px laterales del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta, título y bajada. --- */
.ProfileSelectorList-header {
    margin-bottom: clamp(16px, 1.875vw, 24px); /* Separación con la lista. */
}

/* Etiqueta sobre el título. */
.ProfileSelectorList-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación entre los dos. */
    margin: 0 0 10px; /* Solo separación con el título. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.22px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* Cuadrado exacto y no un punto: el nodo es un frame de 7x7 sin radio. Solo existe en PC. */
.ProfileSelectorList-eyebrow-dot {
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.ProfileSelectorList-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(30px, 3.67vw, 44px); /* Toca los 44px del nodo al piso del rango de escritorio. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.1; /* Interlineado de titular. */
    letter-spacing: -0.025em; /* -1.1px sobre 44px, en em para que acompañe al clamp. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Bajada del título. */
.ProfileSelectorList-description {
    margin: 10px 0 0; /* Separación con el título. */
    max-width: 59.375%; /* 760/1280 del nodo, en porcentaje para aguantar en monitores anchos. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 24px; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.55); /* Gris de cuerpo. */
}

/* --- Lista de filas. Las reglas horizontales del diseño son estos bordes. --- */
.ProfileSelectorList-rows {
    margin: 0; /* Quita el margen propio de la ul. */
    padding: 0; /* Quita la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
    border-top: 2px solid rgba(15, 15, 18, 0.85); /* Regla gruesa de arriba. */
    border-bottom: 2px solid rgba(15, 15, 18, 0.85); /* Regla gruesa de abajo. */
}

/* Una fila de perfil. */
.ProfileSelectorList-row {
    position: relative; /* Bloque contenedor del ::after que estira el enlace sobre la fila. */
    display: flex; /* Foto, acento, texto y flecha en línea. */
    align-items: stretch; /* Todas las piezas al alto de la fila. */
    min-height: clamp(150px, 13.75vw, 176px); /* Es un MÍNIMO: una definición larga puede crecer. */
    background-color: transparent; /* Sin fondo en reposo. */
    transition: background-color 0.25s ease-in-out; /* Suaviza el teñido del hover. */
}

    /* Va en el de abajo para que la última fila no duplique el borde grueso de la lista. */
    .ProfileSelectorList-row + .ProfileSelectorList-row {
        border-top: 1px solid rgba(15, 15, 18, 0.13); /* Línea fina entre filas. */
    }

/* --- Foto de la fila, con su numeral encima. --- */
.ProfileSelectorList-row-photo {
    position: relative; /* Origen de la imagen y del numeral. */
    flex: none; /* No se comprime ni se estira. */
    width: 18.58%; /* 220/1184 del ancho útil de la fila. */
    min-width: 140px; /* Piso, para que la foto no se deforme. */
    max-width: 220px; /* Techo del nodo. */
    /* NO ES DECORATIVO: lleva a cero el min-height automático del elemento flexible. Sin esto, el
       alto intrínseco del archivo del CMS estira la fila. */
    overflow: hidden;
    background-color: #0f0f12; /* Evita el destello blanco bajo el numeral mientras la foto carga. */
}

/* La foto. */
.ProfileSelectorList-row-image {
    position: absolute; /* Dentro del recuadro. */
    inset: 0; /* Lo cubre entero. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    display: block; /* Quita el espacio de línea base. */
    transform: scale(1); /* Punto de partida del acercamiento. */
    transition: transform 0.35s ease-out; /* Más lenta que el resto: recorre más distancia. */
}

/* Numeral sobre la foto. */
.ProfileSelectorList-row-number {
    position: absolute; /* Esquina superior izquierda. */
    top: 16px; /* Posición del nodo. */
    left: 16px; /* Ídem. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 1px; /* Apertura del nodo. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
}

/* --- Barra de acento. EL ELEMENTO MIDE 4px Y LO QUE CRECE ES SU PSEUDOELEMENTO, que se monta sobre
   el bloque de texto: engordar el elemento en el flujo correría el texto en cada hover. --- */
.ProfileSelectorList-row-accent {
    position: relative; /* Origen del ::after que crece. */
    flex: none; /* No se comprime. */
    width: 4px; /* Ancho en reposo. */
}

    /* La barra visible, que es la que se anima. */
    .ProfileSelectorList-row-accent::after {
        content: ""; /* Necesario para que el pseudoelemento exista. */
        position: absolute; /* Sobre el bloque de texto. */
        top: 0; /* A todo el alto de la fila. */
        bottom: 0; /* Ídem. */
        left: 0; /* Desde el borde izquierdo. */
        width: 4px; /* Grosor en reposo. */
        background-color: var(--ProfileSelectorList-row-accent-color, #ff5a1f); /* Color del perfil. */
        z-index: 1; /* Por encima del bloque de texto, que va en el flujo. */
        transition: width 0.25s ease-in-out; /* Suaviza el engorde. */
    }

/* --- Bloque de texto. NO LLEVA position NI overflow: el ::after que hace clickeable la fila se
   resuelve contra el ancestro posicionado más cercano, y con este bloque en absoluto el área
   clickeable sería solo esta caja. --- */
.ProfileSelectorList-row-content {
    flex: 1 1 auto; /* Ocupa el ancho sobrante. */
    min-width: 0; /* Permite comprimirse en vez de desbordar. */
    display: flex; /* Apila los textos. */
    flex-direction: column; /* En columna. */
    justify-content: center; /* Centrado vertical en el alto de la fila. */
    /* El relleno vertical NO es del diseño y es chico a propósito: con uno grande la fila crece al
       destacarse en vez de recolocar el texto dentro de sus 176px. */
    padding: 12px clamp(16px, 2.33vw, 28px);
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* Nombre del perfil. Los 9px de separación van como margen de cada hijo y no como gap: en reposo el
   llamado a la acción mide cero y un gap le seguiría reservando su separación. */
.ProfileSelectorList-row-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(20px, 2.5vw, 30px); /* Tamaño del nodo, con piso legible. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* LOS CUATRO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pintaría el
   título azul y subrayado. El título no cambia de aspecto en el estado destacado del diseño. */
.ProfileSelectorList-row-link,
.ProfileSelectorList-row-link:hover,
.ProfileSelectorList-row-link:focus,
.ProfileSelectorList-row-link:active,
.ProfileSelectorList-row-link:visited {
    color: inherit; /* Hereda el color del título. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
}

    /* Estira el área clickeable a la fila entera; el ancla envuelve solo al título. */
    .ProfileSelectorList-row-link::after {
        content: ""; /* Necesario para que el pseudoelemento exista. */
        position: absolute; /* Contra la fila. */
        inset: 0; /* La cubre entera. */
        z-index: 3; /* Sobre todas las piezas. */
    }

    /* El anillo lo dibuja el ::after, sobre la fila entera. */
    .ProfileSelectorList-row-link:focus-visible {
        outline: none; /* Fuera el anillo del navegador. */
    }

        /* Anillo de foco sobre la fila. */
        .ProfileSelectorList-row-link:focus-visible::after {
            outline: 2px solid #ff5a1f; /* Naranja de marca. */
            outline-offset: -3px; /* Hacia adentro, para no salirse de la fila. */
        }

/* Descripción del perfil. */
.ProfileSelectorList-row-description {
    margin: 9px 0 0; /* Separación del nodo con el título. */
    font-size: 13.5px; /* Tamaño del nodo. */
    line-height: 1.2; /* Interlineado ajustado. */
    color: rgba(15, 15, 18, 0.6); /* Gris de cuerpo. */
}

/* --- Píldoras de palabras clave. Solo existen en el diseño de PC. --- */
.ProfileSelectorList-row-keywords {
    display: flex; /* Píldoras en línea. */
    flex-wrap: wrap; /* Bajan de renglón antes que desbordar. */
    gap: 8px; /* Separación entre píldoras. */
    margin: 9px 0 0; /* Separación con la descripción. */
    padding: 0; /* Quita la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

/* Una píldora. */
.ProfileSelectorList-row-keyword {
    padding: 7px 13px; /* Rellenos del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.18); /* Contorno tenue. */
    border-radius: 16px; /* Píldora. */
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del diseño. */
    line-height: 1.2; /* Interlineado ajustado. */
    color: rgba(15, 15, 18, 0.72); /* Gris del nodo. */
    white-space: nowrap; /* La palabra clave no se parte. */
}

/* --- Llamado a la acción. EN REPOSO NO OCUPA LUGAR, y eso sale del nodo: el título arranca 14px
   más abajo en las filas en reposo que en la destacada. --- */
.ProfileSelectorList-row-cta {
    display: flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 8px; /* Separación entre las dos. */
    margin-top: 0; /* Sin separación mientras está cerrado. */
    padding-top: 0; /* Ídem. */
    height: 0; /* No ocupa lugar en reposo. */
    opacity: 0; /* Invisible en reposo. */
    overflow: hidden; /* Recorta el texto mientras el alto es cero. */
    font-size: 14px; /* Tamaño del nodo. */
    color: #243746; /* Azul oscuro del diseño. */
    transition: height 0.25s ease-in-out, margin-top 0.25s ease-in-out, padding-top 0.25s ease-in-out, opacity 0.25s ease-in-out; /* 250 ms del prototipo. */
}

/* Texto del llamado a la acción. */
.ProfileSelectorList-row-cta-text {
    font-weight: 700; /* Bold del diseño. */
}

/* --- Las dos flechas del widget. Van dibujadas y no como el carácter "→": así el grosor no depende
   de la fuente. El tamaño va en em para que cada una acompañe al cuerpo de su contexto. --- */
.ProfileSelectorList-row-cta-arrow,
.ProfileSelectorList-row-arrow-glyph {
    --ProfileSelectorList-arrow-weight: 2.75; /* Grosor del trazo, ajustable desde acá. */
    flex: none; /* No se comprimen. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke: currentColor; /* Toman el color de su contexto. */
    stroke-width: var(--ProfileSelectorList-arrow-weight); /* Grosor declarado arriba. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Flecha del llamado a la acción, sobre sus 14px. */
.ProfileSelectorList-row-cta-arrow {
    width: 1.1em; /* Proporcional al cuerpo del texto. */
    height: 1.1em; /* Cuadrada. */
}

/* Flecha del extremo derecho, sobre los 20px de su contenedor. */
.ProfileSelectorList-row-arrow-glyph {
    width: 1.2em; /* Da los 14px de glifo visible del nodo. */
    height: 1.2em; /* Cuadrada. */
}

/* --- Flecha del extremo derecho de la fila. Solo existe en el diseño de PC. --- */
.ProfileSelectorList-row-arrow {
    flex: none; /* No se comprime. */
    display: flex; /* Para posicionar el glifo. */
    align-items: center; /* Centrada en el alto de la fila. */
    justify-content: flex-end; /* Contra el borde derecho. */
    width: 7.6%; /* Zona de 90px del nodo. */
    min-width: 56px; /* Piso de la zona. */
    max-width: 90px; /* Techo de la zona. */
    padding-right: clamp(14px, 2.17vw, 26px); /* La flecha queda a 26px del borde derecho. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    font-size: 20px; /* Base del em del glifo. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: rgba(15, 15, 18, 0.45); /* Gris apagado en reposo. */
    transition: color 0.25s ease-in-out, transform 0.25s ease-in-out; /* Suaviza el hover. */
}

/* --- ESTADO DESTACADO — hover. Acotado a punteros finos: en táctil el hover emulado queda pegado en
   la última fila tocada y se ven dos filas destacadas a la vez. --- */
@media (hover: hover) and (pointer: fine) {
    /* El fondo se tiñe con el acento de esta fila, no con un gris parejo para todas. */
    .ProfileSelectorList-row:hover {
        background-color: color-mix(in srgb, var(--ProfileSelectorList-row-accent-color, #ff5a1f) 6%, #ffffff); /* Tinte del perfil. */
    }

        /* El acento engorda. */
        .ProfileSelectorList-row:hover .ProfileSelectorList-row-accent::after {
            width: 10px; /* Grosor del estado destacado. */
        }

        /* Aparece el llamado a la acción. */
        .ProfileSelectorList-row:hover .ProfileSelectorList-row-cta {
            margin-top: 9px; /* Separación con la descripción. */
            padding-top: 2px; /* Aire interno. */
            height: 19px; /* Alto del CTA en el nodo. */
            opacity: 1; /* Visible. */
        }

        /* La flecha se oscurece y se corre. */
        .ProfileSelectorList-row:hover .ProfileSelectorList-row-arrow {
            color: #243746; /* Azul oscuro. */
            transform: translateX(-4px); /* Los 4px que se corre entre las dos variantes. */
        }

        /* Acercamiento sutil de la foto: un 4 % son unos 4px por lado en la mesa de PC. */
        .ProfileSelectorList-row:hover .ProfileSelectorList-row-image {
            transform: scale(1.04); /* Crece un 4 %. */
        }
}

/* El mismo estado por teclado. Va en reglas aparte y no encadenado con coma: una lista de selectores
   que incluya :hover se descarta entera donde el acote de puntero no esté soportado. */
.ProfileSelectorList-row:focus-within {
    background-color: color-mix(in srgb, var(--ProfileSelectorList-row-accent-color, #ff5a1f) 6%, #ffffff); /* Tinte del perfil. */
}

    /* El acento engorda. */
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-accent::after {
        width: 10px; /* Grosor del estado destacado. */
    }

    /* Aparece el llamado a la acción. */
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-cta {
        margin-top: 9px; /* Separación con la descripción. */
        padding-top: 2px; /* Aire interno. */
        height: 19px; /* Alto del CTA en el nodo. */
        opacity: 1; /* Visible. */
    }

    /* La flecha se oscurece y se corre. */
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-arrow {
        color: #243746; /* Azul oscuro. */
        transform: translateX(-4px); /* Igual que el hover. */
    }

    /* La foto se acerca. */
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-image {
        transform: scale(1.04); /* Igual que el hover. */
    }

/* --- TABLET: hasta 1024px. Cambia la FORMA, no la escala: las filas se vuelven tarjetas y
   desaparecen numeral, acento, píldoras y flecha. El CTA pasa a verse siempre. --- */
@media (max-width: 1024px) {
    .ProfileSelectorList {
        padding: clamp(32px, 5.99vw, 46px) 0 clamp(30px, 5.73vw, 44px); /* Rellenos del nodo de tablet. */
    }

    .ProfileSelectorList-container {
        padding: 0 clamp(20px, 4.17vw, 32px); /* 32px laterales del nodo de tablet. */
    }

    .ProfileSelectorList-header {
        margin-bottom: 14px; /* Separación más corta con las tarjetas. */
    }

    .ProfileSelectorList-eyebrow {
        gap: 0; /* Sin cuadrado, no hay nada que separar. */
        margin-bottom: 14px; /* Separación con el título. */
        font-size: 10.5px; /* Tamaño del nodo de tablet. */
        letter-spacing: normal; /* El nodo de tablet no abre las letras. */
    }

    .ProfileSelectorList-eyebrow-dot,
    .ProfileSelectorList-description {
        display: none; /* No existen en los nodos de tablet ni de mobile. */
    }

    .ProfileSelectorList-title {
        font-size: clamp(26px, 4.17vw, 32px); /* 32px del nodo de tablet. */
        letter-spacing: normal; /* El nodo de tablet no compacta. */
    }

    /* La lista deja de ser una pila con reglas y pasa a ser una cuadrícula de tarjetas. */
    .ProfileSelectorList-rows {
        display: flex; /* Tarjetas en línea. */
        flex-wrap: wrap; /* Bajan de renglón cuando no entran. */
        gap: 12px; /* Separación del nodo de tablet. */
        border: 0; /* Sin las reglas gruesas de escritorio. */
    }

    /* Una tarjeta de perfil. */
    .ProfileSelectorList-row {
        /* Dos columnas en la mesa de 768 y una sola cuando el ancho no alcanza, sin otro
           breakpoint: lo decide la base de 300px. */
        flex: 1 1 300px;
        align-items: center; /* Foto y texto centrados entre sí. */
        min-height: 0; /* El alto lo da el contenido. */
        padding: 12px 14px 12px 12px; /* Rellenos del nodo. */
        box-sizing: border-box; /* El relleno entra dentro del ancho. */
        background-color: #f7f7f9; /* Fondo propio de la tarjeta. */
        border: 0; /* Sin contorno. */
    }

        /* Acá las tarjetas se separan con el gap, no con reglas. */
        .ProfileSelectorList-row + .ProfileSelectorList-row {
            border-top: 0; /* Sin línea entre tarjetas. */
        }

    /* Foto cuadrada de la tarjeta. */
    .ProfileSelectorList-row-photo {
        width: 88px; /* Lado del nodo de tablet. */
        min-width: 88px; /* Piso igual al ancho: no se comprime. */
        max-width: 88px; /* Techo igual al ancho: no se estira. */
        height: 88px; /* Cuadrada. */
        align-self: center; /* No se estira al alto de la tarjeta. */
    }

    .ProfileSelectorList-row-number,
    .ProfileSelectorList-row-accent,
    .ProfileSelectorList-row-keywords,
    .ProfileSelectorList-row-arrow {
        display: none; /* No existen en este rango. */
    }

    .ProfileSelectorList-row-content {
        padding: 0 0 0 12px; /* Solo separación con la foto. */
    }

    .ProfileSelectorList-row-title {
        font-size: 16px; /* Tamaño del nodo de tablet. */
    }

    .ProfileSelectorList-row-description {
        margin-top: 3px; /* Separación más corta con el título. */
        font-size: 12px; /* Tamaño del nodo de tablet. */
        line-height: 16px; /* Interlineado del nodo. */
    }

    /* Se ve siempre y en todas las tarjetas: es lo que hace legible el diseño donde no hay hover. */
    .ProfileSelectorList-row-cta,
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-cta {
        margin-top: 3px; /* Separación con la descripción. */
        padding-top: 0; /* Sin aire interno. */
        height: auto; /* El alto lo da el texto. */
        opacity: 1; /* Visible. */
        gap: 4px; /* Separación más corta con la flecha. */
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    /* El foco no cambia el fondo ni recoloca el texto: acá el estado destacado no existe y la señal
       del foco es el contorno del ::after. */
    .ProfileSelectorList-row:focus-within {
        background-color: #f7f7f9; /* Mismo fondo que en reposo. */
    }
}

/* --- MOBILE: hasta 500px. Va después del bloque de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {
    .ProfileSelectorList {
        padding: 32px 0 26px; /* Rellenos del nodo de mobile. */
    }

    .ProfileSelectorList-container {
        padding: 0 20px; /* Relleno lateral del nodo de mobile. */
    }

    .ProfileSelectorList-eyebrow {
        font-size: 10px; /* Tamaño del nodo de mobile. */
    }

    .ProfileSelectorList-title {
        font-size: clamp(22px, 6.93vw, 26px); /* 26px del nodo de mobile. */
    }

    /* Una sola tarjeta por fila: dos columnas quedarían apretadas en un teléfono acostado. */
    .ProfileSelectorList-row {
        flex: 1 1 100%; /* Ancho completo. */
    }

    /* Foto cuadrada más chica. */
    .ProfileSelectorList-row-photo {
        width: 72px; /* Lado del nodo de mobile. */
        min-width: 72px; /* Piso igual al ancho. */
        max-width: 72px; /* Techo igual al ancho. */
        height: 72px; /* Cuadrada. */
    }

    .ProfileSelectorList-row-title {
        font-size: 14px; /* Tamaño del nodo de mobile. */
    }

    .ProfileSelectorList-row-description {
        font-size: 10.5px; /* Tamaño del nodo de mobile. */
        line-height: 14px; /* Interlineado del nodo. */
    }

    .ProfileSelectorList-row-cta {
        font-size: 10.5px; /* Tamaño del nodo de mobile. */
    }
}

/* --- MOVIMIENTO REDUCIDO: se apagan las transiciones, no los estados. --- */
@media (prefers-reduced-motion: reduce) {
    .ProfileSelectorList-row,
    .ProfileSelectorList-row-accent::after,
    .ProfileSelectorList-row-cta,
    .ProfileSelectorList-row-arrow,
    .ProfileSelectorList-row-image {
        transition: none; /* Sin interpolación. */
    }

    /* El acercamiento se apaga entero: es movimiento puro y no aporta nada que el resto del estado
       destacado no dé ya. */
    .ProfileSelectorList-row:hover .ProfileSelectorList-row-image,
    .ProfileSelectorList-row:focus-within .ProfileSelectorList-row-image {
        transform: none; /* La foto no crece. */
    }
}