/* ═══════════════════════════════════════════════════════════════
   GicoPlay — CATÁLOGO ANIMADO (24-sep-2026)
   Capa de diseño SOBRE el catálogo: no cambia la rejilla (filas en el
   orden del tablero, `js/mosaico.js`), ni el HTML de las tarjetas que pinta
   `js/script.js`, ni sus botones. Todo va colgado de `#product-grid` o de
   las piezas nuevas `.gpa-*` que inyecta `js/catalogo-anime.js`.
   Si ese guion o anime.js no cargan, nada de esto oculta una tarjeta:
   el único estado invisible (`.gpa-pend`) lo pone el propio guion.
   ═══════════════════════════════════════════════════════════════ */

.products-section { position: relative; isolation: isolate; }

/* ── Cabecera del catálogo ─────────────────────────────────────── */
.gpa-head {
    position: relative;
    margin: 4px 0 18px;
    padding: 4px 2px 0;
}
/* Hasta que llega a la vista (y la anima anime.js) no enseña el texto:
   así no aparece de golpe y vuelve a salir. La crea el propio guion. */
.gpa-head:not(.gpa-on) > .gpa-kicker,
.gpa-head:not(.gpa-on) > .gpa-title,
.gpa-head:not(.gpa-on) > .gpa-sub { opacity: 0; }
.gpa-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.gpa-kicker b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.gpa-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    position: relative;
    background: var(--success);
}
/* El latido va en un pseudo con transform/opacity: lo mueve la GPU sin repintar. */
.gpa-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--success);
    animation: gpa-latido 1.8s ease-out infinite;
}
@keyframes gpa-latido {
    0%   { transform: scale(1); opacity: .6; }
    100% { transform: scale(3); opacity: 0; }
}
.gpa-title {
    margin: 12px 0 6px;
    font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.55rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--text-main);
}
.gpa-title .gpa-grad {
    background: linear-gradient(100deg, var(--primary) 0%, #7CF9FF 30%, var(--accent) 55%, var(--primary) 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Dos pasadas de brillo al llegar a la cabecera, y quieto. */
.gpa-head.gpa-on .gpa-title .gpa-grad { animation: gpa-brillo 3.5s ease-in-out 2; }
/* La línea con degradado entra entera (partirla en letras rompería el
   degradado: cada letra tendría el suyo). */
.gpa-title .gpa-grad { display: inline-block; }
.gpa-title .gpa-l1 { display: inline-block; }
[data-theme="light"] .gpa-title .gpa-grad {
    background-image: linear-gradient(100deg, #007C96 0%, #00A3C4 30%, #C98410 55%, #007C96 80%);
}
[data-theme="light"] .gpa-kicker { color: #007C96; }
@keyframes gpa-brillo { to { background-position: -220% 0; } }
.gpa-sub {
    margin: 0;
    max-width: 560px;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.5;
}
.gpa-beam {
    position: relative;
    height: 2px;
    margin-top: 16px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    overflow: hidden;
}
.gpa-beam i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
    transform-origin: left center;
    transform: scaleX(0);
}

/* ── Fondo vivo: orbes que se desplazan con el scroll ──────────── */
.gpa-bg {
    position: absolute;
    inset: -40px -20px 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
/* Capa propia: el scroll los mueve en la GPU sin repintar el degradado. */
.gpa-orb {
    position: absolute;
    border-radius: 50%;
    opacity: .55;
    will-change: transform;
}
.gpa-orb.o1 { width: 420px; height: 420px; left: -120px; top: 6%;  background: radial-gradient(circle, rgba(0,245,253,.30), transparent 70%); }
.gpa-orb.o2 { width: 380px; height: 380px; right: -110px; top: 34%; background: radial-gradient(circle, rgba(255,200,87,.20), transparent 70%); }
.gpa-orb.o3 { width: 460px; height: 460px; left: 28%; top: 64%;   background: radial-gradient(circle, rgba(0,180,216,.24), transparent 70%); }
[data-theme="light"] .gpa-orb { opacity: .8; }

/* ── Barra de progreso del recorrido por el catálogo ───────────── */
.gpa-progress {
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    background: linear-gradient(90deg, var(--primary), #7CF9FF, var(--accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 70%, transparent);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity .3s ease;
    will-change: transform;
}
.gpa-progress.on { opacity: 1; }

/* ── Barra de filtros: cristal ─────────────────────────────────── */
.products-section .catalog-filter-bar {
    position: relative;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 45%),
        color-mix(in srgb, var(--bg-card) 78%, transparent);
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
}
[data-theme="light"] .products-section .catalog-filter-bar { box-shadow: 0 10px 26px rgba(8, 38, 48, .08); }
.products-section .catalog-category-chip.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #04252b;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ═══════════════ TARJETAS ═══════════════ */
#product-grid > .card {
    --mx: -400px;
    --my: -400px;
    --rx: 0deg;
    --ry: 0deg;
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, transparent), transparent 40%),
        var(--bg-card);
    border-color: color-mix(in srgb, var(--primary) 14%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
    /* styles.css pone will-change a TODAS las tarjetas: ~40 capas de GPU que
       en un teléfono modesto se comen la memoria. Sólo la lleva la que se mueve. */
    will-change: auto;
    transition: transform .45s cubic-bezier(.23, 1, .32, 1), box-shadow .45s ease, border-color .3s ease;
}
[data-theme="light"] #product-grid > .card { box-shadow: 0 10px 24px rgba(8, 38, 48, .08); }

/* El reveal antiguo (script en línea de index.html) no manda en la rejilla:
   aquí las tarjetas entran con anime.js. Así no hay dos animaciones a la vez. */
#product-grid > .card.reveal { opacity: 1; }
#product-grid > .card.gpa-pend { opacity: 0; }
#product-grid > .card.gpa-anim { transition: none !important; will-change: transform, opacity; }

/* ── RENDIMIENTO: tarjeta fuera de pantalla = todas sus animaciones en pausa.
   Antes corrían 74 animaciones infinitas a la vez (ecualizadores de las
   vitrinas, latido de las etiquetas de stock…) aunque no se vieran. ── */
#product-grid > .card.gpa-fuera,
#product-grid > .card.gpa-fuera *,
#product-grid > .card.gpa-fuera *::before,
#product-grid > .card.gpa-fuera *::after { animation-play-state: paused !important; }

/* Etiqueta de stock: el mismo latido, pero sólo con transform. El original
   animaba una sombra de 30 px sobre un fondo desenfocado y obligaba a
   redibujar las 13 etiquetas en cada fotograma. */
#product-grid .stock-tag {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#product-grid .stock-tag.pulse { animation-name: gpa-pulso; }
@keyframes gpa-pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* Aro de luz alrededor de la tarjeta al pasar por encima (sólo opacidad) */
#product-grid > .card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary), transparent 35%, transparent 65%, var(--accent));
    -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);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
/* Foco que sigue al cursor: un círculo fijo que se MUEVE (transform), en vez
   de un degradado que se redibuja con cada movimiento del ratón. */
#product-grid > .card > .gpa-spot {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 360px;
    height: 360px;
    margin: -180px 0 0 -180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 65%);
    transform: translate3d(var(--mx), var(--my), 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

@media (hover: hover) and (pointer: fine) {
    #product-grid > .card:hover {
        transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px);
        border-color: color-mix(in srgb, var(--primary) 40%, transparent);
        box-shadow: 0 26px 50px rgba(0, 0, 0, .42), 0 0 34px color-mix(in srgb, var(--primary) 20%, transparent);
    }
    [data-theme="light"] #product-grid > .card:hover { box-shadow: 0 22px 44px rgba(8, 38, 48, .16), 0 0 26px rgba(0, 180, 216, .18); }
    #product-grid > .card:hover::before { opacity: 1; }
    #product-grid > .card:hover > .gpa-spot { opacity: 1; will-change: transform; }
}

/* ── Cabecera de imagen de la tarjeta normal ── */
#product-grid > .card > .card-img {
    isolation: isolate;
    background-image:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, currentColor 34%, transparent) 0%, transparent 62%),
        linear-gradient(160deg, #0F3040, #0B2430) !important;
}
[data-theme="light"] #product-grid > .card > .card-img {
    background-image:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, currentColor 26%, transparent) 0%, transparent 62%),
        linear-gradient(160deg, #F4FBFC, #E3F1F4) !important;
}
/* Retícula tenue que da profundidad al fondo del logo */
#product-grid > .card > .card-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 70%);
    pointer-events: none;
}
#product-grid > .card > .card-img img,
#product-grid > .card > .card-img > i {
    transform: scale(var(--gpa-s, 1));
    transition: transform .6s cubic-bezier(.23, 1, .32, 1);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}
#product-grid > .card:hover > .card-img img,
#product-grid > .card:hover > .card-img > i { --gpa-s: 1.1; }
/* Destello que cruza la imagen al pasar por encima */
#product-grid > .card > .card-img > .gpa-shine {
    position: absolute;
    top: -20%;
    left: 0;
    width: 40%;
    height: 140%;
    z-index: 5;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    /* Se desliza con transform (GPU); con `left` recalculaba la página. */
    transform: translateX(-150%) skewX(-18deg);
    pointer-events: none;
    transition: transform .9s cubic-bezier(.23, 1, .32, 1);
}
#product-grid > .card:hover > .card-img > .gpa-shine { transform: translateX(330%) skewX(-18deg); }

/* ── Cuerpo ── */
#product-grid > .card:not(.gpv-card) .card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    letter-spacing: .9px;
}
#product-grid > .card:not(.gpv-card) .card-category::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
#product-grid > .card:not(.gpv-card) .card-price {
    position: relative;
    padding-top: 10px;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.01em;
}
#product-grid > .card:not(.gpv-card) .card-price::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transition: width .5s cubic-bezier(.23, 1, .32, 1);
}
#product-grid > .card:hover .card-price::before { width: 70%; }

/* «Solicitar por WhatsApp» no cabía y se cortaba a los lados. */
#product-grid .btn-add-cart {
    white-space: normal;
    line-height: 1.12;
    text-align: center;
}
#product-grid .qty-selector { border-radius: 12px; }

/* ── Partículas y logo volando al carrito ── */
.gpa-fx {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    overflow: hidden;
}
.gpa-fx .gpa-p {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
}
.gpa-fx .gpa-onda {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 2px solid var(--primary);
}
.gpa-fx .gpa-fly {
    position: absolute;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 20px color-mix(in srgb, var(--primary) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gpa-fx .gpa-fly img { width: 78%; height: 78%; object-fit: contain; }

/* ── Móvil: menos peso, mismo carácter ── */
@media (max-width: 768px) {
    .gpa-head { margin: 0 0 12px; }
    .gpa-title { margin-top: 10px; }
    .gpa-sub { font-size: .8rem; }
    .gpa-orb { opacity: .4; }
    .gpa-orb.o1, .gpa-orb.o3 { width: 260px; height: 260px; }
    .gpa-orb.o2 { width: 220px; height: 220px; }
    #product-grid > .card { border-radius: 18px; }
    #product-grid > .card:not(.gpv-card) .card-price { font-size: 1.25rem; padding-top: 8px; }
    #product-grid > .card > .card-img::before { background-size: 18px 18px; }
}

/* Modo ligero (teléfono modesto, ahorro de datos o FPS medidos bajos):
   fuera todo lo que se pinta en cada fotograma; quedan las entradas. */
.gpa-lite .gpa-bg,
.gpa-lite .gpa-dot::after { display: none; }
.gpa-lite .gpa-head.gpa-on .gpa-title .gpa-grad { animation: none; }
.gpa-lite #product-grid > .card > .card-img img,
.gpa-lite #product-grid > .card > .card-img > i { transition: none; }
/* El fondo «aurora» de toda la página (styles.css) también se queda quieto. */
.gpa-lite body::after { animation: none; }

/* Menos movimiento pedido por el sistema: todo quieto y visible. */
@media (prefers-reduced-motion: reduce) {
    .gpa-dot::after, .gpa-head.gpa-on .gpa-title .gpa-grad { animation: none; }
    .gpa-progress, .gpa-bg { display: none; }
    #product-grid > .card.gpa-pend { opacity: 1; }
    #product-grid > .card > .card-img img,
    #product-grid > .card > .card-img > i { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BANNER DE PORTADA — «así funciona GicoPlay» (24-sep-2026)
   Lo monta `js/catalogo-anime.js` sobre lo que pinta `renderPromo`.
   Sólo `transform`/`opacity` animados; `.gph-off` = banner fuera de
   pantalla → todo en pausa.
   ═══════════════════════════════════════════════════════════════ */
.hero-carousel.gph-off .gph-scene *,
.hero-carousel.gph-off .gph-cinta * { animation-play-state: paused !important; }

.gph-scene {
    position: relative;
    width: 480px;
    height: 350px;
}
/* Luz de fondo detrás del teléfono */
.gph-halo {
    position: absolute;
    left: 50%; top: 50%;
    width: 360px; height: 360px;
    margin: -180px 0 0 -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 245, 253, .20), rgba(0, 180, 216, .06) 45%, transparent 70%);
    pointer-events: none;
}

/* Órbita: un anillo que gira, aplastado en elipse por su contenedor; cada
   logo contragira y se «desaplasta», así se mantiene derecho y redondo. */
.gph-elipse {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    transform: scaleY(.6);
}
.gph-ring {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    animation: gph-gira 36s linear infinite;
    will-change: transform;
}
.gph-slot {
    position: absolute;
    left: 0; top: 0;
    transform: rotate(var(--a)) translateX(205px) rotate(calc(-1 * var(--a)));
}
.gph-ring .gph-chip {
    margin: -26px 0 0 -26px;
    transform: scaleY(1.6667);   /* derecho también si la animación está apagada */
    animation: gph-contragira 36s linear infinite;
}
@keyframes gph-gira { to { transform: rotate(360deg); } }
@keyframes gph-contragira {
    from { transform: rotate(0deg) scaleY(1.6667); }
    to   { transform: rotate(-360deg) scaleY(1.6667); }
}
.gph-chip {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #12303f, #0a1c26);
    border: 1px solid color-mix(in srgb, var(--c, #00F5FD) 55%, transparent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px color-mix(in srgb, var(--c, #00F5FD) 30%, transparent);
    overflow: hidden;
}
.gph-chip img { width: 80%; height: 80%; object-fit: contain; }

/* Teléfono con el chat de GicoPlay */
.gph-phone {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 2;
    width: 168px;
    height: 300px;
    margin: -150px 0 0 -84px;
    padding: 7px;
    border-radius: 30px;
    background: linear-gradient(160deg, #1d3b4a, #08161d);
    border: 1px solid rgba(0, 245, 253, .35);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(0, 245, 253, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: gph-flota 6s ease-in-out infinite;
}
@keyframes gph-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.gph-screen {
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0b141a;
}
.gph-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 10px 8px;
    background: #12303f;
    color: #EAF6F8;
}
.gph-top img { width: 24px; height: 24px; border-radius: 50%; background: #07181F; object-fit: contain; }
.gph-top span { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; }
.gph-top b { font-size: .72rem; }
.gph-top small { font-size: .56rem; color: #25D366; }
.gph-top i { color: #25D366; font-size: .95rem; }
.gph-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 7px 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 245, 253, .05), transparent 60%),
        #0b141a;
}
.gph-b {
    max-width: 92%;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: .62rem;
    line-height: 1.25;
    color: #EAF6F8;
    flex-shrink: 0;
}
.gph-yo {
    align-self: flex-end;
    background: #005c4b;
    border-bottom-right-radius: 3px;
}
.gph-gp {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #1f2c34;
    border: 1px solid rgba(0, 245, 253, .18);
    border-bottom-left-radius: 3px;
}
.gph-gp img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.gph-gp span { display: flex; flex-direction: column; }
.gph-gp b { font-size: .64rem; display: inline-block; transform-origin: left center; }
.gph-gp small { font-size: .54rem; color: #8FB3BD; }
.gph-typing { gap: 3px; padding: 8px 10px; }
.gph-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8FB3BD; display: block; }

/* El logo que vuela de la órbita al chat */
.gph-vuelo {
    position: absolute;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a1c26;
    border: 1px solid var(--c, #00F5FD);
    box-shadow: 0 0 22px color-mix(in srgb, var(--c, #00F5FD) 60%, transparent);
    pointer-events: none;
}
.gph-vuelo img { width: 78%; height: 78%; object-fit: contain; }

.gph-total {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(7, 24, 31, .8);
    border: 1px solid rgba(0, 245, 253, .3);
    color: #8FB3BD;
    font-size: .74rem;
    font-weight: 700;
}
.gph-total b { color: var(--primary); font-size: .9rem; }

/* Sellos de confianza bajo el texto */
.gph-sellos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.gph-sellos span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 245, 253, .07);
    border: 1px solid rgba(0, 245, 253, .2);
    color: #D6EEF2;
    font-size: .78rem;
    font-weight: 700;
}
.gph-sellos .fa-bolt { color: var(--accent); }
.gph-sellos .fa-shield-alt { color: var(--primary); }
.gph-sellos .fa-whatsapp { color: #25D366; }
/* El «Entrega inmediata» original pasa a los sellos. */
.hero-carousel.gph-on .hero-trust { display: none; }

/* Cinta de logos: sólo donde el visual no cabe (móvil y tableta) */
.gph-cinta { display: none; }
@media (max-width: 992px) {
    .gph-sellos { justify-content: center; margin-top: 14px; }
    .gph-cinta {
        display: block;
        margin: 16px -4px 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
    .gph-pista {
        display: flex;
        gap: 10px;
        width: max-content;
        padding-right: 10px;         /* con el hueco final, la mitad exacta = una vuelta */
        animation: gph-cinta 22s linear infinite;
        will-change: transform;
    }
    .gph-cinta .gph-chip { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; }
    @keyframes gph-cinta { to { transform: translateX(-50%); } }
}
@media (max-width: 560px) {
    .gph-sellos span { font-size: .7rem; padding: 6px 10px; }
}
@media (max-width: 1200px) and (min-width: 993px) {
    .hero-visual-side .gph-scene { transform: scale(.88); }
}

[data-theme="light"] .gph-sellos span { color: #EAF6F8; }

.gpa-lite .gph-ring, .gpa-lite .gph-ring .gph-chip, .gpa-lite .gph-phone { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .gph-ring, .gph-ring .gph-chip, .gph-phone, .gph-pista { animation: none; }
}