/* ============================================================
   SPENCER ENTERTAINMENT — SECCIONES  v2
   Barra de anuncio · Navbar · Hero (aurora + dispositivo) ·
   Cinta de plataformas · Centro de Confianza · Flotantes
   ============================================================ */

/* ============================================================
   BARRA DE ANUNCIO
   ============================================================ */
.announce {
  position: relative; z-index: calc(var(--z-nav) + 1);
  background: linear-gradient(90deg, rgba(212,175,55,.07), rgba(212,175,55,.14) 50%, rgba(212,175,55,.07));
  border-bottom: 1px solid rgba(212,175,55,.20);
  font-size: var(--fs-sm);
  /* Mismo bisel que las tarjetas: una luz clara arriba y una
     sombra abajo. Sin esto es una franja de color plana, con
     esto se lee como una tira metálica pegada sobre el sitio. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px -10px rgba(0,0,0,.6);
}
.announce::before {
  content: "";
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: var(--hl-gold);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 42px;
  padding: var(--sp-2) 44px var(--sp-2) var(--gutter);
  text-align: center;
}
.announce__text { color: #E9DCAE; }
.announce__text strong { color: var(--c-gold-lt); font-weight: var(--fw-semi); }
.announce__close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-xs); color: var(--c-text-3);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.announce__close:hover { color: var(--c-text); background: rgba(255,255,255,.07); }
.announce__close svg { width: 15px; height: 15px; }
.announce[hidden] { display: none; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease),
              height var(--t-slow) var(--ease);
}
.nav.is-scrolled {
  height: 62px;
  background: rgba(7,7,7,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--c-border-soft);
}
/* Filo inferior luminoso al hacer scroll */
.nav.is-scrolled::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.28) 50%, transparent);
}

.nav__inner {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--sp-8);
}

/* --- Marca ---
   El logotipo real es un graffiti blanco sobre fondo transparente.
   Se usa tal cual, sin recolorear ni añadirle efectos: la energía
   urbana es lo que diferencia a Spencer, y el entorno premium que
   lo rodea es lo que la eleva. */
.brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.brand__logo {
  height: 44px; width: auto;
  transition: height var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.nav.is-scrolled .brand__logo { height: 36px; }
a.brand:hover .brand__logo { opacity: .78; }

@media (max-width: 420px) {
  .brand__logo { height: 38px; }
  .nav.is-scrolled .brand__logo { height: 32px; }
}

/* Versiones grandes */
.menu__top .brand__logo { height: 42px; }
.footer .brand__logo    { height: 58px; }

/* Marca tipográfica de respaldo: se conserva por si alguna vez se
   necesita el nombre como texto (correos, documentos, impresión). */
.brand__mark { width: 30px; height: 30px; color: var(--c-text); flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 1.0625rem; font-weight: var(--fw-black); letter-spacing: .015em; }
.brand__sub {
  font-size: .5625rem; font-weight: var(--fw-medium);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-text-3); margin-top: 3px;
}

/* --- Enlaces --- */
.nav__links { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  position: relative; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text-3); border-radius: var(--r-sm);
  white-space: nowrap;   /* un enlace partido en dos líneas delata descuido */
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--c-text); background: rgba(255,255,255,.045); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.nav__icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm); color: var(--c-text-3);
  border: 1px solid transparent;
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.nav__icon-btn:hover { color: var(--c-text); background: var(--c-glass); border-color: var(--c-border-glass); }
.nav__icon-btn svg { width: 19px; height: 19px; }

.nav__cta { display: none; }
.nav__burger { display: grid; }

@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .nav__actions { margin-left: 0; }
}

/* --- Menú móvil --- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: rgba(7,7,7,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--gutter) var(--sp-10);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__list { margin-top: var(--sp-12); display: flex; flex-direction: column; }
.menu__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) 0;
  font-size: 1.4rem; font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-text);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
              color var(--t-fast) var(--ease);
}
.menu.is-open .menu__item { opacity: 1; transform: none; }
.menu__item:hover { color: var(--c-gold); }
.menu__item svg { width: 17px; height: 17px; color: var(--c-text-4); }
.menu__foot { margin-top: auto; display: grid; gap: var(--sp-3); }

/* ============================================================
   HERO
   Cinco capas de fondo. Ninguna se ve por separado; juntas
   crean profundidad y hacen que la página no parezca plana.
   ============================================================ */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: calc(100svh - var(--nav-h));
  padding-block: var(--sp-14) var(--sp-16);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-void);
}

/* 1 · Aurora: manchas de luz desenfocadas en movimiento lento.
       Es lo que da "vida" al fondo sin usar ninguna imagen. */
.hero__aurora { position: absolute; inset: -20% -10%; z-index: -3; pointer-events: none; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.hero__blob--1 {
  width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  top: -12%; left: 8%;
  background: radial-gradient(circle, rgba(212,175,55,.30), transparent 68%);
  animation: drift1 26s var(--ease-soft) infinite alternate;
}
.hero__blob--2 {
  width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  top: 22%; right: 2%;
  background: radial-gradient(circle, rgba(180,130,40,.24), transparent 68%);
  animation: drift2 32s var(--ease-soft) infinite alternate;
}
.hero__blob--3 {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  bottom: -14%; left: 32%;
  background: radial-gradient(circle, rgba(255,255,255,.055), transparent 66%);
  animation: drift3 38s var(--ease-soft) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(7%, 9%, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-9%, -6%, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(5%, -9%, 0) scale(1.18); } }

/* 2 · Retícula técnica, difuminada hacia los bordes */
.hero__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 82% 68% at 50% 38%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 38%, #000 12%, transparent 76%);
}

/* 3 · Viñeta: oscurece los bordes y concentra la mirada */
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 96% 84% at 50% 42%, transparent 42%, rgba(0,0,0,.62) 100%);
}

/* 4 · Filo inferior: transición limpia hacia la siguiente sección */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 180px;
  background: linear-gradient(180deg, transparent, var(--c-bg));
  pointer-events: none; z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none; }
}

/* --- Rejilla del Hero --- */
.hero__layout { display: grid; gap: var(--sp-14); align-items: center; }
@media (min-width: 1080px) {
  .hero__layout { grid-template-columns: 1.06fr .94fr; gap: var(--sp-12); }
}

.hero__badge { margin-bottom: var(--sp-7); }
.hero__title { margin-bottom: var(--sp-6); max-width: 15ch; }
.hero__lead { max-width: 30ch; margin-bottom: var(--sp-9); }
@media (min-width: 1080px) { .hero__lead { max-width: 38ch; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__alt { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-9); }
.hero__alt-link { position: relative; font-size: var(--fs-sm); color: var(--c-text-3);
                  transition: color var(--t-base) var(--ease); }
.hero__alt-link u { text-decoration: none; border-bottom: 1px solid var(--c-border-strong); }
.hero__alt-link:hover { color: var(--c-gold); }
.hero__alt-link:hover u { border-color: var(--c-gold); }

/* ============================================================
   DISPOSITIVO — LA PIEZA CENTRAL
   En vez de decir "atención inmediata", la mostramos.
   Es la prueba visual del servicio y no puede confundirse
   con ninguna plantilla: solo existe para Spencer.
   ============================================================ */
.stage {
  position: relative;
  display: grid; place-items: center;
  padding-block: var(--sp-16);   /* aire para las tarjetas flotantes */
}

/* Resplandor bajo el teléfono: lo separa del fondo */
.stage::before {
  content: ""; position: absolute; z-index: 0;
  width: 118%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 62%);
  filter: blur(24px);
}

.device {
  position: relative; z-index: 1;
  width: min(310px, 82vw);
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #2C2C33 0%, #0C0C0E 34%, #0C0C0E 68%, #33333B 100%);
  box-shadow:
    var(--sh-4),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.16);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateZ(0);
  transition: transform 900ms var(--ease);
}
@media (min-width: 1080px) {
  .device:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-6px); }
}
@media (max-width: 1079px) {
  .device { transform: none; }
}

.device__screen {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  /* Antes era casi negro puro: las dos burbujas se perdían contra
     el fondo. Un gris carbón deja que ambas destaquen de verdad. */
  background: linear-gradient(175deg, #1C1C22, #121216);
  aspect-ratio: 300 / 620;
  display: flex; flex-direction: column;
}

/* Isla superior del teléfono */
.device__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 22px; border-radius: var(--r-full);
  background: #000; z-index: 3;
}

/* --- Cabecera del chat --- */
.chat__top {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 42px var(--sp-4) var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.022);
}
.chat__avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(150deg, rgba(212,175,55,.28), rgba(212,175,55,.08));
  border: 1px solid rgba(212,175,55,.34);
  color: var(--c-gold-lt); flex-shrink: 0;
}
.chat__avatar svg { width: 17px; height: 17px; }
.chat__who { min-width: 0; }
.chat__name {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat__status {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--c-success); margin-top: 2px;
}
.chat__status .dot { width: 5px; height: 5px; }

/* --- Cuerpo del chat --- */
.chat__body {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  overflow: hidden;
}
.chat__day {
  align-self: center;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-4);
  background: rgba(255,255,255,.045);
  padding: 3px 10px; border-radius: var(--r-full);
  margin-bottom: var(--sp-1);
}

.bubble {
  max-width: 84%;
  padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45;
  position: relative;
  box-shadow: var(--sh-1);
}
.bubble__time {
  display: block; margin-top: 4px;
  font-size: 9px; color: var(--c-text-4); text-align: right;
}

/* Mensaje del cliente (derecha, tono dorado) */
.bubble--out {
  align-self: flex-end;
  background: linear-gradient(150deg, rgba(212,175,55,.34), rgba(212,175,55,.19));
  border: 1px solid rgba(212,175,55,.38);
  border-radius: 15px 15px 4px 15px;
  color: #F3E8C6;
}
/* Respuesta de Spencer (izquierda, cristal) */
.bubble--in {
  align-self: flex-start;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px 15px 15px 4px;
  color: #F2F2F3;
}

/* Entrada escalonada de la conversación: los mensajes aparecen
   uno tras otro, como en un chat real. La variable --i marca el
   turno de cada burbuja. */
.js .chat-anim {
  opacity: 0;
  transform: translateY(10px) scale(.97);
}
.js .stage.is-visible .chat-anim {
  animation: bubble-in 520ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 380ms + 300ms);
}
@keyframes bubble-in {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .chat-anim { opacity: 1; transform: none; animation: none; }
}

/* Indicador "escribiendo…" */
.typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 4px;
  padding: 11px 13px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px 15px 15px 4px;
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-text-3);
  animation: typing 1.3s var(--ease-soft) infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%,60%,100% { opacity: .3; transform: translateY(0); }
  30%         { opacity: 1;  transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .6; } }

/* Barra de escritura inferior, solo decorativa */
.chat__input {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 var(--sp-3) var(--sp-4);
  padding: 9px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-full);
  font-size: 11px; color: var(--c-text-4);
}
.chat__send {
  margin-left: auto; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--g-gold); color: var(--c-on-gold); flex-shrink: 0;
}
.chat__send svg { width: 12px; height: 12px; }

/* --- Tarjetas flotantes junto al dispositivo --- */
.float {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(18,18,21,.86);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3), var(--inset-top);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: floaty 7s var(--ease-soft) infinite alternate;
}
.float__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.24);
  color: var(--c-gold-lt); flex-shrink: 0;
}
.float__icon svg { width: 15px; height: 15px; }
.float__value { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.1; }
.float__label { font-size: 10px; color: var(--c-text-3); margin-top: 2px; }

/* Se anclan a los extremos del escenario, no del teléfono: así
   se apoyan sobre el borde del dispositivo sin tapar el chat. */
.float--tl { top: 0; left: 0; animation-delay: -1.5s; }
.float--br { bottom: 6%; right: 0; }

@keyframes floaty { to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

@media (max-width: 560px) {
  .float { padding: var(--sp-2) var(--sp-3); }
  .float__label { display: none; }
  .float--tl { top: -2%; left: -2%; }
  .float--br { bottom: 2%; right: -2%; }
}

/* ============================================================
   CINTA DE PLATAFORMAS
   Movimiento lateral continuo: aporta sensación de catálogo
   vivo y de producto tecnológico, sin ocupar espacio.
   ============================================================ */
.ticker {
  position: relative;
  /* Más aire vertical que antes: el chip se levanta al pasar el
     mouse y "overflow: hidden" (necesario para la cinta infinita)
     le cortaba la punta si no le dejábamos margen de sobra. */
  padding-block: var(--sp-10);
  border-block: 1px solid var(--c-border-soft);
  background: var(--c-bg);
  overflow: hidden;
}
.ticker__label {
  text-align: center; margin-bottom: var(--sp-6);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--c-text-4);
}
.ticker__viewport {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex; gap: var(--sp-3);
  width: max-content;
  animation: slide 46s linear infinite;
}
.ticker__viewport:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; }
}

/* Cápsula en vez de rectángulo, con el mismo bisel que los
   cuadros de icono del catálogo (--inset-top): sin eso, un chip
   plano se ve como una etiqueta de HTML, no como una pieza física. */
.ticker__item {
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text-3);
  background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-full);
  box-shadow: var(--inset-top), var(--sh-1);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
/* Al pasar el mouse: se levanta y se inclina un poco hacia atrás,
   como si lo empujaras con el dedo. Ángulo fijo (no sigue al
   cursor) porque estos chips ya se mueven solos en la cinta.
   perspective(400px) sobre un chip tan pequeño exageraba la
   distorsión y el borde superior se salía del recorte del
   contenedor; con 1400px (la misma que usa el celular) el giro
   se ve, pero sin desbordar la caja. */
@media (hover: hover) {
  .ticker__item:hover {
    color: var(--c-gold-lt);
    border-color: rgba(212,175,55,.4);
    background: linear-gradient(155deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
    box-shadow: var(--inset-top), 0 8px 16px -10px rgba(212,175,55,.4);
    transform: perspective(1400px) rotateX(6deg) translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__item:hover { transform: none; }
}

/* ============================================================
   CENTRO DE CONFIANZA
   ============================================================ */
.trust { position: relative; background: var(--c-bg); padding-block: var(--sp-16); }

.trust__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-10);
}
.trust__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-top: var(--sp-4); }

.trust__google {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); color: var(--c-text-2);
  background: var(--c-glass); border: 1px solid var(--c-border-glass);
  border-radius: var(--r-full); box-shadow: var(--inset-top);
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.trust__google:hover { border-color: rgba(212,175,55,.34); color: var(--c-text); }

.trust__grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  background: var(--c-border-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
@media (min-width: 700px)  { .trust__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .trust__grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.trust__item {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.024), transparent 46%), var(--c-card);
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: background-color var(--t-base) var(--ease);
}
.trust__item:hover { background: var(--c-card-2); }
.trust__item:hover .trust__icon { color: var(--c-gold-lt); }

.trust__icon { color: var(--c-gold); transition: color var(--t-base) var(--ease); }
.trust__icon svg { width: 20px; height: 20px; }

.trust__value {
  font-size: 1.6rem; font-weight: var(--fw-bold);
  letter-spacing: -0.04em; line-height: 1;
  background: var(--g-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trust__value--word {
  font-size: 1.0625rem; letter-spacing: var(--ls-heading);
  background: none; color: var(--c-text); line-height: 1.25;
}
.trust__label { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.45; }

/* ============================================================
   FLOTANTES
   ============================================================ */
.sticky-cta {
  position: fixed; z-index: var(--z-sticky);
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(7,7,7,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--c-border);
  transform: translateY(115%);
  transition: transform var(--t-slow) var(--ease);
}
.sticky-cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.35) 50%, transparent);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__row { display: flex; align-items: center; gap: var(--sp-3); }
.sticky-cta__meta { flex: 1; min-width: 0; }
.sticky-cta__title { font-size: var(--fs-sm); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta__sub { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; }
@media (min-width: 1080px) { .sticky-cta { display: none; } }

.to-top {
  position: fixed; z-index: var(--z-sticky);
  right: var(--gutter); bottom: calc(var(--sp-6) + 76px);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: rgba(31,31,37,.86);
  border: 1px solid var(--c-border-glass);
  color: var(--c-text-3);
  box-shadow: var(--sh-2), var(--inset-top);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease),
              transform var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--c-gold); border-color: rgba(212,175,55,.34); }
.to-top svg { width: 18px; height: 18px; }
@media (min-width: 1080px) { .to-top { bottom: var(--sp-8); } }