/*
 * Lo poco que el porte agrega al CSS compilado del diseño.
 *
 * Va en un archivo aparte a propósito: landing-nueva.css lo produce
 * landing-fuente/compilar.sh y se reemplaza entero en cada actualización del
 * diseño. Cualquier regla escrita a mano ahí se perdería sin aviso.
 *
 * Solo hay una cosa: posicionar el panel de atajos. Sus estilos —el fondo, el
 * borde, la sombra, el hover de cada fila— ya vienen en el CSS del diseño
 * (.category-dropdown, .category-shortcuts, .category-shortcut). Lo que no
 * viene es dónde se coloca, porque en la propuesta lo montaba Base UI en un
 * portal, con posicionamiento calculado en JavaScript. Acá el panel es HTML
 * real dentro de su <li class="relative">, así que alcanza con posición
 * absoluta.
 */

.category-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  z-index: 60;
}

/* La primera categoría queda pegada al borde izquierdo en pantallas angostas:
   sin esto el panel se sale de la ventana y aparece una barra horizontal. */
@media (max-width: 900px) {
  .category-dropdown {
    left: 0;
    translate: none;
  }
}

/* El panel abre y cierra con el atributo [hidden], que el navegador respeta
   solo si ninguna regla le gana en especificidad. .category-dropdown declara
   display:grid en su lista, así que se deja explícito. */
.category-dropdown[hidden] {
  display: none;
}

/* La flecha del disparador gira cuando su panel está abierto, igual que en el
   diseño original, que lo hacía con data-popup-open. */
.category-trigger[aria-expanded='true'] > svg {
  rotate: 180deg;
}

/* ─────────────────────────────────────────────────────────────────────────
   El plan más elegido, con peso propio

   DIFERENCIA DELIBERADA CON LA PROPUESTA, pedida por el dueño. En el diseño
   original la tarjeta destacada es blanca sobre una sección blanca, con solo
   un borde azul de un píxel: al lado de las otras tres no se distingue, y esa
   es justo la que interesa que se mire.

   Se refuerza sin cambiar de paleta: los colores son los que el diseño ya usa
   —el azul #3378E5 y el marfil azulado de las secciones—, así que no desentona
   con el resto de la página. El texto sigue siendo #0A1842 sobre un fondo muy
   claro, que mantiene el contraste bien por encima de lo exigible.
   ───────────────────────────────────────────────────────────────────────── */

.pricing-plan.is-featured {
  /* Degradado apenas perceptible: azula la parte de arriba, donde está el
     nombre del plan y el precio, y se apaga hacia los beneficios. */
  background: linear-gradient(180deg, #eaf3ff 0%, #f7fbff 46%, #fff 100%);
  border-color: #3378e5;
  border-width: 2px;
  /* El borde de 2 px comería un píxel por lado; se compensa para que la
     tarjeta mida exactamente lo mismo que sus vecinas y la grilla no salte. */
  padding: 21px;
  box-shadow:
    0 2px 0 #3378e51f inset,
    0 20px 46px #174f9726;
}

/* La etiqueta pasa de azul pálido con letra azul a azul sólido con letra
   blanca: es lo primero que se lee de la tarjeta. */
.pricing-plan.is-featured .pricing-label span {
  background: #3378e5;
  color: #fff;
}

/* Un realce apenas mayor en escritorio, donde las cuatro tarjetas se ven en
   fila y la comparación es lado a lado. En una sola columna no aporta nada y
   solo desalinearía, así que se limita a partir de dos columnas. */
@media (min-width: 601px) {
  .pricing-plan.is-featured {
    scale: 1.015;
    z-index: 1;
  }
}

/* Sin animación para quien pidió menos movimiento: el realce es estático. */
@media (prefers-reduced-motion: reduce) {
  .pricing-plan.is-featured {
    scale: none;
  }
}