/* =========================================================
   930 AUTOGEST — Tarjetas destacadas laterales
   Acabado «pastilla»: cuatro fichas CUADRADAS y sueltas,
   separadas entre sí y translúcidas, ancladas al borde
   derecho. Sustituye al acabado «consola» (una sola losa con
   las filas pegadas) que hubo hasta el 2026-09-02.

   El contenido lo gestiona el plugin (CPT ag930_destacado);
   aquí solo está la presentación.

   Colores: SIEMPRE tokens de tokens-v2.css. Los rgba() sobre
   250,250,249 y 21,23,25 son --color-blanco y --color-carbon
   con alfa, que CSS no sabe hacer sobre una variable de color
   sin duplicarla.
   ========================================================= */

#ag930-destacados,
#ag930-destacados * {
  box-sizing: border-box;
}

#ag930-destacados {
  /* Superficie TRANSLÚCIDA, y el número de al lado no es decorativo.
     El vidrio ya se descartó una vez (fase 1b): la columna es
     `position: fixed`, pasa por delante del hero oscuro y también de
     las secciones blancas, así que su contraste depende de lo que
     haya detrás y la línea de gancho caía a 3,84:1, por debajo del
     4,5:1 exigido.

     Vuelve porque el problema no era el vidrio: era CUÁNTO tinte
     llevaba. Con 0,68 de carbón, el peor caso posible —la superficie
     compuesta sobre el blanco de página, que es el fondo más claro
     que puede tocarle— deja el texto principal en 6,05:1 y el
     secundario en 5,15:1. Medido en
     `PROPUESTAS-VISUALES/fase-2-tarjetas.mjs`, que recalcula los
     cuatro pares cada vez que se toca uno de estos valores.

     SI ALGUIEN BAJA ESTE 0,68, que vuelva a pasar ese script: por
     debajo de 0,64 el texto secundario cae del 4,5:1 y deja de
     cumplir, y no se nota mirando —se ve «bonito»— hasta que alguien
     con poca vista no puede leer el gancho. */
  --ag930-d-tinte: 0.68;
  --ag930-d-superficie: rgba(21, 23, 25, 0.68);
  --ag930-d-superficie-viva: rgba(21, 23, 25, 0.8);
  --ag930-d-panel: rgba(21, 23, 25, 0.82);
  --ag930-d-desenfoque: blur(14px);

  /* Lado de la pastilla, atado al alto de la ventana: cuatro de 168px
     con sus huecos son 720px y no caben bajo la cabecera de un
     portátil de 800px. Con `clamp` se encogen solas en vez de meterse
     debajo de la cabecera o salirse por abajo. */
  --ag930-d-lado: clamp(128px, 17vh, 168px);
  --ag930-d-hueco: clamp(10px, 1.6vh, 16px);
  --ag930-d-borde: rgba(250, 250, 249, 0.16);
  --ag930-d-borde-vivo: rgba(250, 250, 249, 0.34);
  --ag930-d-hilo: rgba(250, 250, 249, 0.09);

  /* Sobre la superficie translúcida el plata se queda en 3,8:1 en el
     peor caso, así que el texto secundario sube a blanco rebajado:
     5,2:1 sobre sección clara y 13,6:1 sobre la foto del hero. */
  --ag930-d-texto: var(--color-blanco);
  --ag930-d-texto-2: rgba(250, 250, 249, 0.88);
  --ag930-d-texto-3: rgba(250, 250, 249, 0.7);

  --ag930-d-caja: rgba(250, 250, 249, 0.06);
  --ag930-d-caja-borde: rgba(250, 250, 249, 0.12);
  --ag930-d-caja-viva: rgba(250, 250, 249, 0.09);

  /* Sobre fondo oscuro el rojo de marca se queda en 3,25:1; este es el
     token que el tema reserva justo para eso (5,85:1). */
  --ag930-d-alerta: var(--action-on-dark);
  /* «Te llamamos»: el verde de un botón de descolgar. Es el único verde
     del panel a propósito, para que el teléfono se vea de lejos sin
     competir con el rojo de las ofertas. Blanco encima: 4,6:1. */
  --ag930-d-llamada: #1f8a4c;
  --ag930-d-llamada-vivo: #23a058;

  position: fixed;
  /* Centrada en el ESPACIO ÚTIL, no en la ventana: la cabecera es
     `sticky` y va en z-index 50, así que lo que se centre contra el
     alto total se le mete debajo y pierde la primera pastilla. */
  top: calc(var(--header-height, 104px) + (100dvh - var(--header-height, 104px)) / 2);
  right: 0;
  transform: translateY(-50%);

  /* No aparece hasta los 3 segundos. Antes de eso no está: ni se ve ni
     se puede pulsar (`visibility`, no solo `opacity`, que dejaría una
     capa invisible cazando clics sobre el hero).
     Va en CSS y no en JavaScript a propósito: es una animación de una
     sola propiedad que resuelve el compositor, no hace falta encolar
     nada ni esperar a que corra ningún script. */
  animation: ag930-d-entrar 420ms ease 3s both;
  /* 40 no es un número al azar: es el hueco que queda libre en la escala
     del tema (cabecera 50, desplegables del menú 60, menú móvil 70, aviso
     de cookies 100). Esto es un apoyo a la navegación, no la navegación:
     no debe pintarse por encima de NADA del mobiliario propio del sitio.
     Con 9990 —lo que tenía— el dique móvil se pintaba sobre el aviso de
     cookies y le tapaba los botones de aceptar y rechazar. Lo cazó
     `npm run test:security`. */
  z-index: 40;
  font-family: var(--font-body);
}

/* El tipo, por LUMINANCIA y no por tono. Sobre una superficie oscura,
   el zafiro y el grafito de la marca son invisibles: son oscuros. Cuatro
   escalones del mismo neutro sí se distinguen, y el rojo queda reservado
   para lo que de verdad es oferta — si todo fuese rojo, el rojo no
   significaría nada. */
/* `position: relative` va aquí y no en una segunda regla con el mismo
   selector: es el ancla del panel, que cuelga de la tarjeta (ver «El
   panel», más abajo). Stylelint no admite el selector duplicado, y con
   razón: dos reglas del mismo elemento en dos sitios se acaban
   contradiciendo. */
#ag930-destacados .ag930-d-tarjeta {
  position: relative;
  --ag930-d-acento: rgba(184, 189, 194, 0.5);
}
#ag930-destacados .ag930-d-tarjeta[data-tipo="servicio"] { --ag930-d-acento: rgba(250, 250, 249, 0.88); }
#ag930-destacados .ag930-d-tarjeta[data-tipo="oferta"] { --ag930-d-acento: var(--action-on-dark); }
#ag930-destacados .ag930-d-tarjeta[data-tipo="paquete"] { --ag930-d-acento: rgba(184, 189, 194, 0.62); }
#ag930-destacados .ag930-d-tarjeta[data-tipo="colaborador"] { --ag930-d-acento: rgba(184, 189, 194, 0.3); }
#ag930-destacados .ag930-d-tarjeta[data-tipo="llamada"] { --ag930-d-acento: var(--ag930-d-llamada); }

/* ---------------------------------------------------------
   La losa
   --------------------------------------------------------- */
#ag930-destacados .ag930-d-pista {
  /* `relative` es el ancla del ::after que dibuja la línea de arriba.
     Estaba en una segunda regla con el mismo selector, 80 líneas más
     abajo; se sube aquí para no tener dos declaraciones del mismo
     elemento (auditoría de release 2026-08-29, hallazgo A-13). */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Sin fondo, sin borde y sin sombra: la superficie ya no vive aquí
     sino en cada pastilla, que ahora son objetos sueltos. */
  gap: var(--ag930-d-hueco);
  padding-right: 16px;
  /* SIN overflow:hidden: el panel cuelga de dentro de una ficha y esto
     lo recortaría entero. */
}

/* La pastilla: cuadrada, con el icono arriba y el texto centrado
   debajo. El lado va en una variable atada a `vh` (ver arriba) porque
   cuatro pastillas fijas no caben en un portátil. */
#ag930-destacados .ag930-d-tirador {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--ag930-d-lado);
  height: var(--ag930-d-lado);
  padding: 16px 14px;
  background: var(--ag930-d-superficie);
  border: 1px solid var(--ag930-d-borde);
  border-radius: 24px;
  -webkit-backdrop-filter: var(--ag930-d-desenfoque);
  backdrop-filter: var(--ag930-d-desenfoque);
  box-shadow: -6px 10px 28px rgba(21, 23, 25, 0.3);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

/* SOLO la pastilla que tiene el ratón encima reacciona: se aclara un
   punto y se despega un poco hacia dentro. Las demás no se enteran
   —lo garantiza `abrir()` en destacados-v2.js, que cierra las otras—,
   que es justo lo que se pidió al separarlas. */
#ag930-destacados .ag930-d-tarjeta:hover .ag930-d-tirador,
#ag930-destacados .ag930-d-tarjeta.esta-abierta .ag930-d-tirador {
  background: var(--ag930-d-superficie-viva);
  border-color: var(--ag930-d-borde-vivo);
  transform: translateX(-5px);
}

/* La franja de acento del lateral y el hilo de luz de la losa eran
   piezas del acabado «consola»: con las pastillas sueltas el color de
   cada tarjeta lo lleva su icono, que está más a la vista y no obliga
   a pintar un pseudoelemento a pantalla completa en cada fotograma. */
#ag930-destacados .ag930-d-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ag930-d-caja);
  border: 1px solid var(--ag930-d-caja-borde);
  color: var(--ag930-d-acento);
}
#ag930-destacados .ag930-d-icono svg {
  width: 24px;
  height: 24px;
}

#ag930-destacados .ag930-d-rotulo {
  min-width: 0;
  width: 100%;
}

/* DOS LÍNEAS, no una con puntos suspensivos. En la fila de 258px de
   ancho del acabado anterior cabía cualquier título; en una pastilla
   de ~150px, «Compramos tu coche a domicilio» se quedaba en
   «Compramos tu…», que no dice nada. `line-clamp` corta a la segunda
   línea si alguien escribe un título kilométrico. */
#ag930-destacados .ag930-d-rotulo b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ag930-d-texto);
  overflow: hidden;
}
#ag930-destacados .ag930-d-gancho {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ag930-d-texto-2);
  overflow: hidden;
}

/* Punto que late: solo en las tarjetas de tipo «oferta». Si latiesen
   todas, no llamaría la atención ninguna. */
#ag930-destacados .ag930-d-punto {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag930-d-alerta);
  animation: ag930-d-late 2.8s infinite;
}
@keyframes ag930-d-late {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 82, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(255, 90, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 82, 0); }
}

/* ---------------------------------------------------------
   El panel
   --------------------------------------------------------- */
/* Va FUERA DEL FLUJO, y colgado de LA TARJETA. En el acabado consola
   colgaba del contenedor y salía centrado sobre el conjunto —tenía
   sentido: era una sola pieza—, pero con las pastillas sueltas
   aparecía flotando a media altura y no se entendía de cuál salía.
   Con la tarjeta en `position: relative` —declarado arriba, junto a
   su color de acento, para no repetir el selector—, el `right: 100%`
   y el `top: 50%` de aquí abajo se resuelven contra ella.
   Y sigue fuera del flujo: metido en el flex junto al tirador
   ocuparía su ancho aunque estuviera desplazado, y empujaría la
   columna ~350px hacia dentro. */
#ag930-destacados .ag930-d-panel {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 352px;
  max-width: 88vw;
  /* Tope general; en escritorio destacados-v2.js lo baja al hueco que
     queda de verdad entre la cabecera y el borde de abajo. */
  max-height: 80vh;
  overflow-y: auto;
  /* Al llegar al final del panel, la rueda no se lleva la página. */
  overscroll-behavior: contain;
  padding: 20px 18px 15px;
  background: var(--ag930-d-panel);
  border: 1px solid var(--ag930-d-borde);
  border-radius: 20px;
  -webkit-backdrop-filter: var(--ag930-d-desenfoque);
  backdrop-filter: var(--ag930-d-desenfoque);
  box-shadow: -16px 0 50px rgba(21, 23, 25, 0.42);
  margin-right: 12px;
  transform: translate(18px, -50%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* El navegador se ahorra maquetar y pintar lo de dentro mientras
     está cerrado. */
  content-visibility: hidden;
  transition: transform 320ms cubic-bezier(0.22, 0.7, 0.3, 1), opacity 250ms ease,
    visibility 0s linear 320ms;
}
#ag930-destacados .ag930-d-tarjeta.esta-abierta .ag930-d-panel {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  content-visibility: visible;
  transition-delay: 0s;
}

/* Centrado en la tarjeta, el panel de la primera se sale por arriba y
   se mete debajo de la cabecera (z-index 50, manda ella), y el de la
   última se sale por abajo. Las dos de arriba lo alinean por su borde
   superior y lo dejan crecer hacia abajo; las dos de abajo, al revés.
   Esto elige hacia dónde crece; que además QUEPA lo asegura
   destacados-v2.js (`encajar`), que con cinco pastillas o en una
   pantalla baja no bastaba (2026-09-27).
   SOLO EN ESCRITORIO: en el móvil el panel es una hoja anclada abajo, y
   estas reglas, más específicas que las de la hoja, le ponían `top: 0`
   y la mandaban debajo de la cabecera (2026-09-25). */
@media (min-width: 1024px) {
  #ag930-destacados .ag930-d-tarjeta:nth-child(1) .ag930-d-panel,
  #ag930-destacados .ag930-d-tarjeta:nth-child(2) .ag930-d-panel {
    top: 0;
    bottom: auto;
    transform: translate(18px, 0);
  }
  #ag930-destacados .ag930-d-tarjeta:nth-child(1).esta-abierta .ag930-d-panel,
  #ag930-destacados .ag930-d-tarjeta:nth-child(2).esta-abierta .ag930-d-panel {
    transform: translate(0, 0);
  }
  #ag930-destacados .ag930-d-tarjeta:nth-last-child(1) .ag930-d-panel,
  #ag930-destacados .ag930-d-tarjeta:nth-last-child(2) .ag930-d-panel {
    top: auto;
    bottom: 0;
    transform: translate(18px, 0);
  }
  #ag930-destacados .ag930-d-tarjeta:nth-last-child(1).esta-abierta .ag930-d-panel,
  #ag930-destacados .ag930-d-tarjeta:nth-last-child(2).esta-abierta .ag930-d-panel {
    transform: translate(0, 0);
  }
}

/* La entrada a los 3 segundos: solo un desplazamiento, que lo resuelve el
   compositor. SIN opacidad (2026-09-25): con un fundido, quien mide a los 3-4 s
   (Lighthouse, axe) veía el texto blanco a medio aparecer sobre una página
   clara y daba contraste 1,5:1. En Inicio no se notaba porque detrás hay
   una foto; al llevar el panel a Precios, Servicios o el blog, restaba
   accesibilidad. Ahora entra deslizándose desde fuera de la pantalla, ya
   opaco: en ningún fotograma hay texto semitransparente. */
@keyframes ag930-d-entrar {
  from {
    visibility: hidden;
    transform: translateY(-50%) translateX(110%);
  }
  to {
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

#ag930-destacados .ag930-d-panel h2 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ag930-d-texto);
}
#ag930-destacados .ag930-d-sub {
  margin: 0 0 17px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ag930-d-texto-2);
}

#ag930-destacados .ag930-d-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  padding: 11px 12px;
  margin-bottom: 8px;
  background: rgba(250, 250, 249, 0.05);
  border: 1px solid var(--ag930-d-caja-borde);
  border-radius: 11px;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    transform var(--transition-fast);
}
#ag930-destacados .ag930-d-item:hover,
#ag930-destacados .ag930-d-item:focus-visible {
  border-color: var(--ag930-d-borde-vivo);
  background: var(--ag930-d-caja-viva);
  transform: translateX(-3px);
  outline: none;
}
#ag930-destacados .ag930-d-item-ico {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--ag930-d-caja);
  border: 1px solid var(--ag930-d-caja-borde);
  color: var(--ag930-d-acento);
}
#ag930-destacados .ag930-d-item-ico svg {
  width: 18px;
  height: 18px;
}
#ag930-destacados .ag930-d-item b {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ag930-d-texto);
}
#ag930-destacados .ag930-d-item small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ag930-d-texto-2);
}
#ag930-destacados .ag930-d-tag {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 90, 82, 0.14);
  color: var(--ag930-d-alerta);
}

/* «Ver todas las ofertas»: el enlace del panel de la pestaña roja.
   Pegajoso al pie del panel: con cinco paquetes la hoja del móvil hace
   scroll, y el enlace a la página entera no debe quedar escondido al
   final de la lista. */
#ag930-destacados .ag930-d-todas {
  position: sticky;
  bottom: 0;
  box-shadow: 0 -8px 16px rgba(21, 23, 25, 0.35);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 4px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--action);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--transition-fast);
}
#ag930-destacados .ag930-d-todas:hover,
#ag930-destacados .ag930-d-todas:focus-visible {
  background: var(--action-hover);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#ag930-destacados .ag930-d-velo {
  position: fixed;
  inset: 0;
  background: rgba(21, 23, 25, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: -1;
}

#ag930-destacados .ag930-d-mas {
  display: none;
}

#ag930-destacados .ag930-d-tirador:focus-visible,
#ag930-destacados .ag930-d-mas:focus-visible {
  outline: 3px solid var(--action-on-dark);
  outline-offset: -3px;
}

/* ---------------------------------------------------------
   Móvil Y TABLET: aquí no hay columna lateral, hay dique inferior
   ---------------------------------------------------------
   El corte estaba en 767px y era demasiado bajo. Medido en una tablet
   de 768px con las pastillas nuevas: la columna se llevaba el 24 % del
   ancho, tapaba la mitad derecha del hero y la cuarta pastilla se
   pintaba encima del titular de la sección siguiente. Con las filas
   estrechas del acabado anterior molestaba menos y por eso no se vio.

   1023px deja el dique inferior en todo el territorio de tablet
   —incluida la apaisada de 1024 menos su barra— y la columna lateral
   solo donde de verdad sobra sitio. */
@media (max-width: 1023px) {
  /* El dique es una barra FIJA: se queda con los últimos ~68px de la
     ventana para siempre. Hay que devolverle ese hueco al documento o lo
     último del pie queda debajo y no se puede tocar (le pasaba al enlace
     «Configurar cookies»).
     Va en el PIE y no en `padding-bottom` del body a propósito: el aviso
     de cookies ya usa el padding del body para lo suyo
     (`.ag930-con-cookie-banner`, main-v40.css) y las dos reglas se
     pisarían — ganaría la última del archivo y una de las dos dejaría de
     reservar nada. Sobre el pie se suman sin estorbarse. */
  body.ag930-con-destacados .site-footer {
    padding-bottom: 68px;
  }

  /* La columna lateral pedía 190px de ancho en una pantalla de 375:
     media pantalla. Y centrada verticalmente caía encima del botón
     rojo del hero —«Matricular como Histórico» entonces, «Conversión a
     histórico» desde RC116—. Abajo no compite con el ancho, no
     toca el hero y está donde llega el pulgar. */
  #ag930-destacados {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    background: var(--color-carbon);
    border-top: 1px solid var(--ag930-d-borde);
    box-shadow: 0 -6px 24px rgba(21, 23, 25, 0.24);
    /* El respaldo de env() lleva unidad a propósito: un `0` pelado es
       válido pero se lee peor, y aquí lo que se reserva es espacio. */
    /* stylelint-disable-next-line length-zero-no-unit */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* La entrada de escritorio termina en `translateY(-50%)` y, con el
       relleno `both`, la animación GANA al `transform: none` de arriba:
       el dique quedaba subido media altura y, peor, con una
       transformación puesta. Un elemento transformado es el bloque
       contenedor de sus hijos `position: fixed`, así que la hoja del
       panel (`bottom: 74px`) se medía desde el dique y no desde la
       ventana: se abría con la mitad fuera de la pantalla y sin forma de
       llegar a su último enlace. Aquí la entrada es solo de opacidad,
       sin tocar `transform`. Encontrado al añadir «Ver todas las
       ofertas» (2026-09-25). */
    animation-name: ag930-d-entrar-dique;
  }
  /* Solo visibilidad: ni fundido (el contraste a medio aparecer, ver
     ag930-d-entrar) ni desplazamiento (un transform aquí vuelve a hacer del
     dique el bloque contenedor de la hoja fija). Aparece a los 3 s. */
  @keyframes ag930-d-entrar-dique {
    from {
      visibility: hidden;
    }
    to {
      visibility: visible;
    }
  }

  #ag930-destacados .ag930-d-pista {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 9px 46px 9px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Sin esto, el snap alinea la primera pastilla con el borde del
       contenido y deja scrollLeft en 12 (el relleno): el degradado
       izquierdo aparecía nada más cargar, diciendo que había algo
       escondido a la izquierda cuando no lo había. */
    scroll-padding-left: 12px;
    scrollbar-width: none;
  }
  #ag930-destacados .ag930-d-pista::-webkit-scrollbar { display: none; }
  #ag930-destacados .ag930-d-pista::before { display: none; }
  #ag930-destacados .ag930-d-tarjeta {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  #ag930-destacados .ag930-d-tirador {
    width: auto;
    /* 48px de alto y el ancho lo pone el texto: por encima de los
       44x44 mínimos con holgura. */
    height: 48px;
    padding: 0 15px 0 14px;
    gap: 10px;
    border: 1px solid var(--ag930-d-borde);
    border-radius: var(--radius-pill);
    background: var(--ag930-d-superficie);
    /* DESHACER LA PASTILLA CUADRADA. Arriba es una ficha en columna con
       el icono encima del texto; aquí es una cápsula de una sola línea.
       Sin estas tres líneas el icono se quedaba arriba y el rótulo se
       salía por debajo de la cápsula — se veía cortado por el borde de
       la ventana. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }
  #ag930-destacados .ag930-d-tarjeta:first-child .ag930-d-tirador,
  #ag930-destacados .ag930-d-tarjeta:last-child .ag930-d-tirador {
    border-radius: var(--radius-pill);
  }
  /* El gancho no cabe en una pastilla de 48px y duplicaría el alto de
     la barra; aquí el título basta. */
  #ag930-destacados .ag930-d-gancho { display: none; }
  #ag930-destacados .ag930-d-icono { width: 26px; height: 26px; border-radius: 7px; }
  #ag930-destacados .ag930-d-icono svg { width: 15px; height: 15px; }
  /* Una sola línea con puntos suspensivos. Arriba el rótulo admite dos
     —una pastilla cuadrada da sitio—, pero en una cápsula de 48px la
     segunda línea se sale. */
  #ag930-destacados .ag930-d-rotulo b {
    display: block;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ag930-destacados .ag930-d-punto { top: 7px; right: 7px; }

  /* Degradados a los lados: dicen «esto sigue» sin escribirlo. Opacos
     en el primer tercio, porque con un degradado lineal puro la
     pastilla que pasa por debajo se seguía leyendo a medias. */
  #ag930-destacados::before,
  #ag930-destacados::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  #ag930-destacados::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-carbon) 22%, transparent);
  }
  #ag930-destacados::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-carbon) 34%, transparent);
  }
  #ag930-destacados.puede-izquierda::before { opacity: 1; }
  #ag930-destacados.puede-derecha::after { opacity: 1; }

  /* La flecha que invita a seguir. Se apaga al llegar al final para no
     invitar a ir donde ya no queda nada. */
  #ag930-destacados .ag930-d-mas {
    display: grid;
    place-items: center;
    position: absolute;
    right: 2px;
    top: 9px;
    width: 44px;
    height: 48px;
    z-index: 3;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ag930-d-texto-2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  #ag930-destacados.puede-derecha .ag930-d-mas {
    opacity: 1;
    pointer-events: auto;
  }
  /* Chapa propia: sin ella la flecha se apoyaba sobre el título de la
     pastilla que estuviese pasando por debajo y se leían mezclados. */
  #ag930-destacados .ag930-d-mas::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-carbon);
    border: 1px solid var(--ag930-d-borde);
  }
  #ag930-destacados .ag930-d-mas svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    animation: ag930-d-invita 2.4s ease-in-out 3;
  }
  @keyframes ag930-d-invita {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }

  /* El panel pasa a hoja anclada abajo, por encima del dique. */
  #ag930-destacados .ag930-d-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 74px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 58vh;
    border: 1px solid var(--ag930-d-borde);
    border-radius: 18px;
    transform: translateY(16px);
  }
  #ag930-destacados .ag930-d-tarjeta.esta-abierta .ag930-d-panel {
    transform: translateY(0);
  }
  #ag930-destacados.hay-abierta .ag930-d-velo {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------------------------------------------------------
   «Te llamamos»
   --------------------------------------------------------- */
/* El icono va RELLENO de verde (las demás pastillas lo llevan en una caja
   translúcida) y cada pocos segundos el auricular «suena»: es lo que se
   pidió, que se vea de lejos. Con movimiento reducido no suena (regla
   general de más abajo). */
#ag930-destacados .ag930-d-tarjeta[data-tipo="llamada"] .ag930-d-icono {
  background: var(--ag930-d-llamada);
  border-color: var(--ag930-d-llamada-vivo);
  color: var(--color-blanco);
  box-shadow: 0 0 0 0 rgba(35, 160, 88, 0.45);
  animation: ag930-d-aro 3.2s ease-out infinite;
}
#ag930-destacados .ag930-d-tarjeta[data-tipo="llamada"] .ag930-d-icono svg {
  animation: ag930-d-suena 3.2s ease-in-out infinite;
  transform-origin: 50% 60%;
}
#ag930-destacados .ag930-d-tarjeta[data-tipo="llamada"]:hover .ag930-d-icono,
#ag930-destacados .ag930-d-tarjeta[data-tipo="llamada"].esta-abierta .ag930-d-icono {
  background: var(--ag930-d-llamada-vivo);
}
@keyframes ag930-d-suena {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-14deg); }
  70% { transform: rotate(12deg); }
  74% { transform: rotate(-10deg); }
  78% { transform: rotate(8deg); }
  82% { transform: rotate(0); }
}
@keyframes ag930-d-aro {
  0%, 60% { box-shadow: 0 0 0 0 rgba(35, 160, 88, 0.45); }
  90%, 100% { box-shadow: 0 0 0 12px rgba(35, 160, 88, 0); }
}

/* El formulario dentro del panel, sobre fondo oscuro. */
#ag930-destacados .ag930-llamada .ag930-field {
  margin-bottom: 11px;
}
#ag930-destacados .ag930-llamada label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ag930-d-texto-2);
}
#ag930-destacados .ag930-llamada input[type="text"],
#ag930-destacados .ag930-llamada input[type="tel"],
#ag930-destacados .ag930-llamada select {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ag930-d-texto);
  background: rgba(250, 250, 249, 0.07);
  border: 1px solid var(--ag930-d-borde);
  border-radius: 10px;
}
#ag930-destacados .ag930-llamada select option {
  color: #151719;
}
#ag930-destacados .ag930-llamada input::placeholder {
  color: var(--ag930-d-texto-3);
}
#ag930-destacados .ag930-llamada input:focus-visible,
#ag930-destacados .ag930-llamada select:focus-visible {
  outline: 2px solid var(--ag930-d-llamada-vivo);
  outline-offset: 1px;
  border-color: transparent;
}
#ag930-destacados .ag930-llamada .ag930-consentimiento {
  margin: 4px 0 12px;
}
#ag930-destacados .ag930-llamada .ag930-consentimiento label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.4;
}
#ag930-destacados .ag930-llamada .ag930-consentimiento input {
  margin-top: 2px;
  accent-color: var(--ag930-d-llamada-vivo);
}
#ag930-destacados .ag930-llamada a {
  color: var(--ag930-d-texto);
}
#ag930-destacados .ag930-llamada .ag930-llamada-boton {
  width: 100%;
  background: var(--ag930-d-llamada);
  border-color: var(--ag930-d-llamada);
  color: var(--color-blanco);
}
#ag930-destacados .ag930-llamada .ag930-llamada-boton:hover,
#ag930-destacados .ag930-llamada .ag930-llamada-boton:focus-visible {
  background: var(--ag930-d-llamada-vivo);
  border-color: var(--ag930-d-llamada-vivo);
}

/* Sin movimiento si el sistema lo pide: ni deslizamiento, ni latido,
   ni la flecha que invita. El resto de tokens ya lo cubre en
   tokens-v2.css, pero las animaciones propias van declaradas aquí. */
@media (prefers-reduced-motion: reduce) {
  #ag930-destacados *,
  #ag930-destacados *::before,
  #ag930-destacados *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impresión: esto es navegación, no contenido. */
@media print {
  #ag930-destacados { display: none; }
}