/* * ==================================================
   * HOME: RECOMENDACIONES DE CLIENTES
   * Separador con título + tarjeta de cifras, garantías y carrusel de columnas con scroll-snap. Lo monta
   * JS/homeRecomendaciones.js dentro de #homeRecomendaciones.
   * Mismo lenguaje que las tarjetas de plataformas y la franja de confianza
   * (Pantalla principal.css): esquinas redondeadas, fondo oscuro translúcido,
   * borde sutil y acentos cian/magenta. Sin biseles ni clip-path.
   * Columnas de alto fijo (--hr-alto, lo calcula el JS) con 1–3 tarjetas.
   * Móvil primero: 1 columna por diapositiva; más columnas según el ancho.
   * ================================================== */

.hr-centinela {
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.home-recomendaciones {
    --hr-radio: 20px;
    --hr-gap: 14px;
    --hr-gap-columna: 12px;
    --hr-borde: rgba(255, 255, 255, .08);
    --hr-fondo: linear-gradient(160deg, rgba(18, 12, 42, .86), rgba(8, 10, 26, .78));
    /* * Acentos de la sección (antes dorado): cian + morado. Se ajustan aquí. */
    --hr-acento: #22d3ee;
    --hr-acento-2: #a78bfa;
    --hr-estrellas: #ffc857; /* calificación: dorado por convención */
    max-width: var(--home-bloque-ancho, 100%);
    /* * Misma pila del body + fuentes de emoji antes de la genérica: los emojis de los
       * clientes se pintan en color (Windows/macOS/Android) y nunca como cuadro. */
    font-family: "Segoe UI", Roboto, Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}

.hr-bloque {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* * Separador: línea con degradado a cada lado de una pastilla con el título. */
.hr-separador {
    --hr-separador-texto: 1.05rem;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hr-separador-linea {
    flex: 1 1 0;
    min-width: 12px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hr-acento-2), var(--hr-acento));
    box-shadow: 0 0 8px color-mix(in srgb, var(--hr-acento) 55%, transparent);
}

.hr-separador-linea:last-child {
    background: linear-gradient(270deg, transparent, var(--hr-acento-2), var(--hr-acento));
}

.hr-separador-titulo {
    flex: 0 1 auto;
    max-width: 70%;
    margin: 0;
    padding: 10px 22px;
    border: 2px solid transparent;
    border-radius: 22px;
    background: linear-gradient(#1b1040, #1b1040) padding-box, linear-gradient(135deg, var(--hr-acento-2), var(--hr-acento)) border-box;
    box-shadow: 0 0 12px rgba(167, 139, 250, .35);
    font-size: var(--hr-separador-texto);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
    color: var(--text-light);
}

/* * Móvil: tarjeta, garantías y carrusel en vertical; ≥ 768 px, en una fila. */
.hr-fila {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* * ---------- Encabezado: carta de rareza rango S ---------- */
/* * Ángulo del borde holográfico. Sin soporte de @property la animación salta de
   * 0 a 360° (mismo dibujo): el degradado queda estático. */
@property --an {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes hr-holo-giro {
    to {
        --an: 360deg;
    }
}

.hr-cabecera {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 8px;
    overflow: hidden;
    border-radius: var(--hr-radio);
    background: linear-gradient(135deg, rgba(8, 10, 26, .74), rgba(18, 12, 42, .86));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow:
        0 0 18px rgba(var(--wod-cyan-rgb), .035),
        0 0 18px rgba(var(--wod-magenta-rgb), .03),
        0 4px 14px rgba(0, 0, 0, .25),
        inset 0 0 18px rgba(0, 0, 0, .18);
}

/* * Borde holográfico de 2 px: anillo enmascarado (content-box excluido) con un
   * conic-gradient que gira. Solo corre con el encabezado a la vista (.hr-visible). */
.hr-cabecera::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--an, 0deg), var(--hr-acento), var(--hr-acento-2), var(--hr-acento));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: hr-holo-giro 5s linear infinite paused;
}

.hr-cabecera.hr-visible::after {
    animation-play-state: running;
}

/* * Rango «S»: marca de agua cian→morado centrada detrás del contenido (decorativa: sin
   * texto accesible). El contenido va por encima (z-index 1). */
.hr-cabecera::before {
    content: "S";
    content: "S" / "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 88px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--hr-acento), var(--hr-acento-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: .16;
    pointer-events: none;
}

.hr-cabecera>* {
    position: relative;
    z-index: 1;
}

/* * Móvil: las tres cifras en una sola fila compacta; en fila (≥ 768 px) se apilan. */
.hr-cifras {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hr-cifra {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    padding: 2px 4px;
    text-align: center;
}

.hr-cifra+.hr-cifra {
    border-left: 1px solid var(--hr-borde);
}

.hr-cifra--anio {
    justify-content: center;
}

.hr-cifra-estrellas {
    font-size: .62rem;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--hr-estrellas);
}

.hr-cifra-valor {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--wod-cyan);
}

.hr-cifra:nth-child(even) .hr-cifra-valor {
    color: var(--wod-magenta);
}

.hr-cifra-etiqueta {
    font-size: .68rem;
    letter-spacing: .02em;
    color: var(--text-muted);
}

/* * ---------- Garantías ----------
   * Mismo tamaño en todas (filas 1fr), sin biselado. Móvil: rejilla 2×2. */
.hr-garantias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hr-garantia {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#1b1040, #1b1040) padding-box, linear-gradient(135deg, var(--hr-acento-2), var(--hr-acento)) border-box;
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--hr-acento-2) 25%, transparent);
    color: #fff;
}

.hr-garantia-icono {
    display: inline-flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    --hr-gc: var(--hr-acento-2);
    background: #2c1b6b;
    color: var(--hr-gc);
    box-shadow: 0 0 10px color-mix(in srgb, var(--hr-gc) 60%, transparent);
    font-size: .8rem;
    transition: transform .35s ease, opacity .35s ease;
}

.hr-garantia:nth-child(1) .hr-garantia-icono { --hr-gc: var(--hr-acento-2); }
.hr-garantia:nth-child(2) .hr-garantia-icono { --hr-gc: #6ee7b7; }
.hr-garantia:nth-child(3) .hr-garantia-icono { --hr-gc: var(--hr-acento); }
.hr-garantia:nth-child(4) .hr-garantia-icono { --hr-gc: #ff6f61; }

/* * Texto con giro: dos caras apiladas en un contenedor de alto fijo (hasta 3 líneas del alterno),
   * así la etiqueta no cambia de tamaño. Solo transform y opacity. */
.hr-garantia-texto {
    --hr-gt-alt: .72rem;
    --hr-gar-desp: 38px; /* ancho del icono + gap: lo que el alterno recupera por la izquierda */
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: calc(3.6 * var(--hr-gt-alt));
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    perspective: 400px;
}

.hr-gt-cara {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    backface-visibility: hidden;
    transition: transform .45s ease, opacity .45s ease;
}

.hr-gt-b {
    left: calc(-1 * var(--hr-gar-desp));
    justify-content: center;
    text-align: center;
    font-size: var(--hr-gt-alt);
    transform: rotateX(90deg);
    opacity: 0;
}

.hr-gt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* * Entrada una sola vez (la dispara el JS): de la izquierda, una tras otra.
   * Solo transform y opacity. Sin la clase de espera, siempre visibles. */
.hr-gar-espera .hr-garantia {
    opacity: 0;
    transform: translateX(-46px);
}

.hr-gar-espera.hr-gar-entra .hr-garantia {
    opacity: 1;
    transform: none;
    transition: transform .6s cubic-bezier(.2, .9, .3, 1), opacity .6s cubic-bezier(.2, .9, .3, 1);
    transition-delay: calc(var(--hr-gi, 0) * .18s);
}

/* * Interacción (informativa, no enfocable): barrido de luz + brillo cian; el icono sale y el alterno ocupa todo el ancho.
   * El barrido vive en ::after, así no choca con el transform de entrada. */
.hr-garantia {
    position: relative;
    overflow: hidden;
}

.hr-garantia::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--hr-acento) 35%, transparent) 50%, transparent 70%);
    transform: translateX(-130%);
    pointer-events: none;
}

.hr-garantia,
.hr-gar-espera.hr-gar-entra .hr-garantia {
    transition: transform .6s cubic-bezier(.2, .9, .3, 1), opacity .6s cubic-bezier(.2, .9, .3, 1), box-shadow .2s ease;
}

.hr-gar-espera:not(.hr-gar-entra) .hr-garantia {
    transition: none;
}

.hr-gar-espera.hr-gar-entra .hr-garantia {
    transition-delay: calc(var(--hr-gi, 0) * .18s), calc(var(--hr-gi, 0) * .18s), 0s;
}

@media (hover: hover) and (pointer: fine) {
    .hr-garantia:hover {
        border-color: var(--hr-acento);
        box-shadow: inset 0 0 16px color-mix(in srgb, var(--hr-acento) 35%, transparent), 0 0 14px color-mix(in srgb, var(--hr-acento) 35%, transparent);
    }

    .hr-garantia:hover::after {
        transform: translateX(130%);
        transition: transform .7s ease;
    }

    .hr-garantia:hover .hr-garantia-icono {
        transform: translateX(-12px) scale(.6);
        opacity: 0;
    }

    .hr-garantia:hover .hr-gt-a {
        transform: rotateX(-90deg);
        opacity: 0;
    }

    .hr-garantia:hover .hr-gt-b {
        transform: none;
        opacity: 1;
    }
}

/* * Táctil: clase puesta por el JS (dura ~2.5 s). */
.hr-garantia--alterno .hr-garantia-icono {
    transform: translateX(-12px) scale(.6);
    opacity: 0;
}

.hr-garantia--alterno .hr-gt-a {
    transform: rotateX(-90deg);
    opacity: 0;
}

.hr-garantia--alterno .hr-gt-b {
    transform: none;
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .hr-garantia:active {
        border-color: var(--hr-acento);
        box-shadow: inset 0 0 16px color-mix(in srgb, var(--hr-acento) 35%, transparent), 0 0 14px color-mix(in srgb, var(--hr-acento) 35%, transparent);
    }

    .hr-garantia:active::after {
        transform: translateX(130%);
        transition: transform .7s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-garantia::after {
        display: none;
    }

    /* Sin giro: solo fundido corto. */
    .hr-gt-cara {
        transition: opacity .15s linear;
    }

    .hr-gt-b,
    .hr-garantia:hover .hr-gt-a,
    .hr-garantia--alterno .hr-gt-a {
        transform: none;
    }

    .hr-garantia-icono {
        transition: opacity .15s linear;
    }

    .hr-garantia:hover .hr-garantia-icono,
    .hr-garantia--alterno .hr-garantia-icono {
        transform: none;
    }
}

/* * ---------- Carrusel ---------- */
.hr-carrusel {
    position: relative;
    min-width: 0;
    container-type: inline-size;
}

/* * ---------- Paginación de puntos (bajo el carrusel) ---------- */
.hr-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    height: 44px;
    margin: 4px auto 0;
    -webkit-tap-highlight-color: transparent;
}

.hr-pag button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.hr-pag button:focus-visible {
    outline: 2px solid var(--accent-global);
    outline-offset: -2px;
    border-radius: 8px;
}

.hr-pag-puntos {
    display: flex;
    align-items: center;
    min-width: 0;
}

.hr-pag-puntos.entra-sig {
    animation: hr-pag-entra-sig .25s ease-out;
}

.hr-pag-puntos.entra-prev {
    animation: hr-pag-entra-prev .25s ease-out;
}

@keyframes hr-pag-entra-sig {
    from { opacity: 0; transform: translateX(8px); }
}

@keyframes hr-pag-entra-prev {
    from { opacity: 0; transform: translateX(-8px); }
}

/* Área táctil 44 px de alto; el trazo visible es el ::before. */
.hr-pag-punto {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 44px;
}

.hr-pag-punto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    translate: -50% -50%;
    transition: width .25s ease, height .25s ease, background-color .25s ease;
}

.hr-pag-punto.activo::before {
    width: 18px;
    height: 3px;
    background: linear-gradient(90deg, var(--hr-acento), var(--hr-acento-2));
}

.hr-pag-flecha {
    flex: 0 0 auto;
    width: 36px;
    height: 44px;
    font-size: 14px;
    line-height: 1;
    color: var(--hr-acento);
    transition: opacity .2s ease, transform .15s ease;
}

.hr-pag-flecha:active:not(:disabled) {
    transform: scale(.88);
}

.hr-pag-flecha:disabled {
    opacity: .25;
    cursor: default;
}

.hr-pag-contador {
    margin-left: 8px;
    min-width: 8ch;
    font-size: 11px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
    .hr-pag-punto:not(.activo):hover::before {
        background: #fff;
    }

    .hr-pag-flecha:hover:not(:disabled) {
        color: #fff;
    }
}

/* Móvil: 10 puntos + 2 flechas caben en 360 px; sin contador. */
@media (max-width: 575.98px) {
    .hr-pag-punto {
        width: 26px;
    }

    .hr-pag-flecha {
        width: 32px;
    }

    .hr-pag-contador {
        display: none;
    }
}

.hr-pista {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--hr-gap);
    margin: 0;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none;
}

.hr-pista::-webkit-scrollbar {
    display: none;
}

.hr-pista:focus-visible {
    outline: 2px solid var(--accent-global);
    outline-offset: 2px;
}

/* * Durante el arrastre con mouse el snap se suspende y no se selecciona texto. */
.hr-pista.arrastrando {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

/* * Columna: alto común; sus tarjetas reparten el sobrante (flex-grow). */
.hr-columna {
    display: flex;
    flex: 0 0 85%;
    flex-direction: column;
    gap: var(--hr-gap-columna);
    min-width: 0;
    height: var(--hr-alto, auto);
    scroll-snap-align: start;
}

/* * Con una tarjeta abierta (Leer más) solo crece su columna. */
.hr-columna.abierta {
    height: auto;
    min-height: var(--hr-alto, 0);
}

/* * Columna de medición: invisible, sin recorte; el JS la retira en la misma tarea. */
.hr-columna.hr-medidor {
    height: auto;
    visibility: hidden;
}

.hr-medidor .hr-tarjeta {
    flex: none;
}

.hr-medidor .hr-texto {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
}

@container (min-width: 500px) {
    .hr-columna {
        flex-basis: calc((100cqw - var(--hr-gap)) / 2);
    }
}

/* * 3 y 4 columnas solo con ≥ ~290 px por columna: el título grande cabe en 2 líneas. */
@container (min-width: 900px) {
    .hr-columna {
        flex-basis: calc((100cqw - 2 * var(--hr-gap)) / 3);
    }
}

@container (min-width: 1220px) {
    .hr-columna {
        flex-basis: calc((100cqw - 3 * var(--hr-gap)) / 4);
    }
}

.hr-tarjeta {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 16px 10px;
    border: 1px solid var(--hr-borde);
    border-radius: var(--hr-radio);
    background: var(--hr-fondo);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: border-color .2s ease-out, box-shadow .2s ease-out;
}

/* * Título grande (gancho): blanco, máx. 2 líneas con elipsis. El h3 lleva el
   * separador (::after); el span interior es el que se recorta (el recorte no invade el relleno). */
.hr-tarjeta-titulo {
    position: relative;
    flex: none;
    margin: 0;
    padding-bottom: 10px;
    font-size: clamp(1.15rem, 5vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: #fff;
}

/* * Separador: blanco que se desvanece hacia la derecha, con brillo tenue. */
.hr-tarjeta-titulo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, 0));
    box-shadow: 0 0 6px rgba(255, 255, 255, .28);
}

.hr-tarjeta-titulo-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* * Mensaje de una frase: solo el título, centrado en el alto sobrante y sin separador. */
.hr-tarjeta.solo-titulo .hr-tarjeta-titulo {
    margin: auto 0;
    padding-bottom: 0;
}

.hr-tarjeta.solo-titulo .hr-tarjeta-titulo::after {
    content: none;
}

/* * margin-bottom auto: el sobrante de la columna queda entre el texto y el pie. */
.hr-texto {
    margin: 0 0 auto;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text-light);
    white-space: pre-line;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--hr-lineas, 9);
    line-clamp: var(--hr-lineas, 9);
    overflow: hidden;
}

.hr-tarjeta.abierta .hr-texto {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
}

/* * ---------- Iconos de línea con degradado (decorativos) ----------
   * El JS elige icono, degradado y modo con la huella del ítem y pinta un <use> del
   * <symbol> compartido (.hr-ic-defs); el svg de la tarjeta pone el stroke
   * (url del degradado) que hereda el trazo. Un solo modo por tarjeta. */
/* ! Oculto con tamaño 0 y absoluto, nunca display:none: rompería los degradados. */
.hr-ic-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hr-ic {
    position: absolute;
    pointer-events: none;
}

.hr-ic svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* * Animado: 30 px arriba a la derecha; el título le deja sitio. Solo se mueve con
   * su columna a la vista (.hr-vivo, lo pone el JS). Solo transform/opacity/filter. */
.hr-ic--animado {
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    stroke-width: 1.7;
}

.hr-tarjeta.con-ic-animado .hr-tarjeta-titulo {
    padding-right: 36px;
}

.hr-ic--animado svg {
    animation: var(--hr-ic-anim, none) infinite paused;
}

.hr-columna.hr-vivo .hr-ic--animado svg {
    animation-play-state: running;
}

.hr-ic--animado[data-ic="corazon"] {
    --hr-ic-anim: hr-ic-late 2s ease-in-out;
}

.hr-ic--animado[data-ic="escudo"] {
    --hr-ic-anim: hr-ic-late 2.6s ease-in-out;
}

.hr-ic--animado[data-ic="trofeo"] {
    --hr-ic-anim: hr-ic-flota 3s ease-in-out;
}

.hr-ic--animado[data-ic="burbuja"] {
    --hr-ic-anim: hr-ic-flota 3.4s ease-in-out;
}

.hr-ic--animado[data-ic="destellos"] {
    --hr-ic-anim: hr-ic-gira 4s ease-in-out;
}

.hr-ic--animado[data-ic="corona"] {
    --hr-ic-anim: hr-ic-salta 1.4s;
}

.hr-ic--animado[data-ic="rayo"] {
    --hr-ic-anim: hr-ic-brilla 3s ease-in-out;
}

.hr-ic--animado[data-ic="estrella"] {
    --hr-ic-anim: hr-ic-titila 2.6s ease-in-out;
}

.hr-ic--animado[data-ic="regalo"] {
    --hr-ic-anim: hr-ic-mece 2.4s ease-in-out;
}

.hr-ic--animado[data-ic="pulgar"] {
    --hr-ic-anim: hr-ic-rebota 1.8s;
}

@keyframes hr-ic-late {
    0%,
    45%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.14);
    }

    30% {
        transform: scale(1.04);
    }
}

@keyframes hr-ic-flota {
    50% {
        transform: translateY(-4px);
    }
}

@keyframes hr-ic-gira {
    50% {
        transform: rotate(10deg) scale(1.06);
    }
}

@keyframes hr-ic-salta {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }

    35% {
        transform: translateY(-5px);
        animation-timing-function: ease-in;
    }

    70%,
    100% {
        transform: translateY(0);
    }
}

@keyframes hr-ic-brilla {
    50% {
        filter: brightness(1.5);
    }
}

@keyframes hr-ic-titila {
    50% {
        transform: rotate(15deg) scale(1.08);
        opacity: .7;
    }
}

@keyframes hr-ic-mece {
    0%,
    100% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(6deg);
    }
}

@keyframes hr-ic-rebota {
    0%,
    60%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }

    30% {
        transform: translateY(-3px);
        animation-timing-function: ease-in;
    }
}

/* * Marca de agua: grande abajo a la derecha, detrás del texto (la tarjeta aísla su
   * pila y recorta lo que sale), quieta. Absoluta: no suma alto a la tarjeta. */
.hr-tarjeta.con-ic-marca {
    overflow: hidden;
    isolation: isolate;
}

.hr-ic--marca {
    right: -18px;
    bottom: -20px;
    z-index: -1;
    width: 106px;
    height: 106px;
    stroke-width: 1.2;
    opacity: .22;
}

/* * Pie de alto fijo (con o sin Leer más) para que la medición sea estable. */
.hr-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    font-size: .76rem;
    color: var(--text-muted);
}

.hr-pie .fa-facebook {
    font-size: .95rem;
    color: var(--accent-global);
}

.hr-origen {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hr-leer-mas {
    position: relative;
    flex: none;
    height: 22px;
    margin-left: auto;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent-global);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .2s ease, transform .15s ease;
}

/* * Área táctil de 44 px de alto sin agrandar el pie. */
.hr-leer-mas::before {
    content: "";
    position: absolute;
    inset: -11px -8px;
}

.hr-leer-mas[hidden] {
    display: none;
}

.hr-leer-mas:active {
    transform: scale(.96);
}

.hr-leer-mas:focus-visible {
    outline: 2px solid var(--accent-global);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
    .hr-tarjeta:hover {
        border-color: rgba(var(--wod-cyan-rgb), .28);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 14px rgba(var(--wod-cyan-rgb), .08);
    }

    .hr-columna:nth-child(even) .hr-tarjeta:hover {
        border-color: rgba(var(--wod-magenta-rgb), .28);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 14px rgba(var(--wod-magenta-rgb), .08);
    }

    .hr-leer-mas:hover {
        opacity: .85;
    }
}

@media (min-width: 768px) {
    .hr-separador {
        --hr-separador-texto: clamp(1.15rem, 2.2vw, 1.5rem);
        gap: 18px;
    }

    .hr-separador-titulo {
        max-width: none;
        padding: 12px 34px;
        border-radius: 999px;
    }

    .hr-fila {
        flex-direction: row;
        align-items: stretch;
        gap: 18px;
    }

    .hr-cabecera {
        flex: 0 0 168px;
        padding: 18px 14px;
    }

    /* * La barra de páginas queda bajo el carrusel: cabecera y garantías terminan con las tarjetas. */
    .hr-cabecera,
    .hr-garantias {
        margin-bottom: 48px;
    }

    .hr-cabecera::before {
        font-size: 130px;
    }

    .hr-cifras {
        flex-direction: column;
    }

    .hr-cifra {
        flex: none;
        padding: 9px 0;
    }

    .hr-cifra+.hr-cifra {
        border-top: 1px solid var(--hr-borde);
        border-left: 0;
    }

    .hr-cifra-estrellas {
        font-size: .78rem;
    }

    .hr-cifra-valor {
        font-size: 1.4rem;
    }

    .hr-cifra-etiqueta {
        font-size: .78rem;
    }

    .hr-garantias {
        flex: 0 0 188px;
        grid-template-columns: minmax(0, 1fr);
    }

    .hr-garantia-texto {
        --hr-gt-alt: .76rem;
        font-size: .82rem;
    }

    .hr-carrusel {
        flex: 1 1 0;
    }
}

@media (min-width: 992px) {
    .home-recomendaciones {
        --hr-radio: 22px;
    }

    .hr-fila {
        gap: 28px;
    }

    .hr-cabecera {
        flex-basis: 190px;
    }

    .hr-garantias {
        flex-basis: 200px;
    }

    .hr-tarjeta-titulo {
        font-size: 1.25rem;
    }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .hr-pista {
        cursor: grab;
    }
}

/* * Ambiente de la sección: patrón de reacciones y redes (tile transparente de
 * scripts/generarPatronRecomendaciones.js) sobre una base oscura con halo superior,
 * bajo un velo ligero. Capa fija que solo anima opacidad: la opacidad del grupo hace
 * el fundido desde transparente (sin destello). El recorte, la máscara, la base y el
 * velo van en el contenedor; solo ::before gira (12° hacia arriba a la derecha).
 * ? Preset de color: AMBIENTE_PRESET en homeRecomendaciones.js ("violeta" | "vino").
 * ! Jerarquía: misma capa que #background-preview (-1), insertada antes en el DOM. */
.hr-ambiente {
    --hr-base-color: #150c33;
    --hr-base-halo: #3b1d8a;
    --hr-base-velo-inicio: rgba(21, 12, 51, .3);
    --hr-base-velo-fin: rgba(12, 8, 28, .5);
    --hr-patron-opacidad: .4;
    --hr-patron-tam: 864px 720px;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--hr-base-halo), transparent 70%) var(--hr-base-color);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    transition: opacity 1.1s ease;
}

/* * Preset alternativo: vino granate. */
.hr-ambiente[data-preset="vino"] {
    --hr-base-color: #250812;
    --hr-base-halo: #6a1432;
    --hr-base-velo-inicio: rgba(37, 8, 18, .3);
    --hr-base-velo-fin: rgba(16, 5, 9, .5);
}

/* * Cuadrado de 150vmax centrado: cubre cualquier viewport girado (diagonal ≤ 1.42vmax). */
.hr-ambiente::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    opacity: var(--hr-patron-opacidad);
    background-image: url("../IMG/recomendaciones/hr-patron-v2-1x.webp");
    background-image: image-set(url("../IMG/recomendaciones/hr-patron-v2-1x.webp") 1x, url("../IMG/recomendaciones/hr-patron-v2-2x.webp") 2x);
    background-size: var(--hr-patron-tam);
    transform: translate(-50%, -50%) rotate(-12deg);
}

.hr-ambiente::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--hr-base-velo-inicio), var(--hr-base-velo-fin));
}

/* * Móvil: tile al 70 % para que los elementos no se vean enormes. */
@media (max-width: 767.98px) {
    .hr-ambiente {
        --hr-patron-tam: 605px 504px;
    }
}

.hr-ambiente.activo {
    opacity: 1;
}

/* ! Fuera del Home (tema de catálogo activo) nunca se muestra. */
body[class*="theme-"] .hr-ambiente {
    opacity: 0;
    transition: none;
}

.hr-cifra-valor {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {

    .hr-ambiente,
    .hr-tarjeta,
    .hr-leer-mas,
    .hr-garantia,
    .hr-pag-punto::before,
    .hr-pag-flecha {
        transition: none;
    }

    .hr-pag-puntos {
        animation: none !important;
    }

    .hr-cabecera::after,
    .hr-ic--animado svg {
        animation: none;
    }
}