@font-face {

      font-family: "Fixture";

      src: url("/fonts/Fixture-Regular.woff2") format("woff2");

      font-weight: 400;

      font-style: normal;

      font-display: swap;

    }

    @font-face {

      font-family: "Fixture";

      src: url("/fonts/Fixture-Bold.woff2") format("woff2");

      font-weight: 700;

      font-style: normal;

      font-display: swap;

    }

    */



    :root{

      /* Colores del texto y del degradé del subrayado */

      --ink: #0E1A27;

      --y1:  #FFE56B;   /* inicio degradé */

      --y2:  #FFD200;   /* medio */

      --y3:  #FFC000;   /* final */



      /* Tipografía */

      --font-size: 30px;

      --line-height: 1.15;



      /* Barra: misma posición que tu código */

      --bar-offset: 3px;      /* separación exacta bajo la línea base del texto */

      --bar-thick: 3px;       /* grosor de la barra */

      --bar-width: 85%;       /* largo relativo al ancho de “de agua” */

      --bar-left-pad: 5%;    /* que empiece un poco antes del texto */



      /* Animación (rebote + fade) */

      --speed: 0.8s;          /* velocidad; menor = más rápido */

    }



    * { box-sizing: border-box; }



    body{

      margin: 60px 90px;

      font-family: "Fixture", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

      color: var(--ink);

      background: #fff;

    }



    /* Frase completa: una sola línea, Bold */

    .headline{

      font-size: var(--font-size);

      line-height: var(--line-height);

      font-weight: 700;           /* Fixture Bold */

      white-space: nowrap;        /* fuerza una sola línea */

      letter-spacing: 0.01em;     /* opcional */

    }



    /* “de agua” en Regular, barra 3px más abajo (misma posición vertical) */

    .underline{

      font-size: var(--font-size);

      line-height: var(--line-height);

      font-weight: 400;           /* Fixture Regular */

      display: inline-block;

      white-space: nowrap;

      position: relative;

      vertical-align: baseline;

      overflow: visible;

    }



    /* Subrayado: degradé, rebote y desvanecimiento en extremos */

    .underline::after{

      content: "";

      position: absolute;

      left: calc(-1 * var(--bar-left-pad));

      top: calc(100% + var(--bar-offset));   /* MISMA POSICIÓN que tu código */

      width: var(--bar-width);

      height: var(--bar-thick);

      border-radius: 999px;

      background: linear-gradient(90deg, var(--y1) 0%, var(--y2) 50%, var(--y3) 100%);

      /* Animaciones: transform rebota (alternate) + opacity se desvanece en extremos */

      animation:

        slideBounce var(--speed) cubic-bezier(.22,.0,.0,.22) infinite alternate,

        fadeEdges   var(--speed) linear                           

    infinite alternate;

      will-change: transform, opacity;

    }



    /* Rebote: izquierda → derecha y vuelve (alternate).

       Ajusta los porcentajes para calibrar el recorrido horizontal. */

    @keyframes slideBounce{

      0%   { transform: translateX(0%); }   /* borde izquierdo */

      100% { transform: translateX(40%); }  /* borde derecho (mismo rango que tu ejemplo) */

    }



    /* Desvanecimiento en extremos:

       - Opacidad baja al tocar los bordes (0% y 100%)

       - Opacidad plena en el tramo central (≈10%–90%) */

    @keyframes fadeEdges{

      0%   { opacity: 0; }

      10%  { opacity: 1; }

      90%  { opacity: 0; }

      100% { opacity: 0; }

    }



    /* Respeto a usuarios con reducción de movimiento */

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

      .underline::after{

        animation: none;

        transform: none;

        opacity: 1;

      }

    }
.title {
	color: #5C6AC4;
}
  .btn-category{
    --btn-h: 50px;          /* alto del botón */
    --btn-w: 180px;          /* alto del botón */
    --black: #000000;
    --yellow: #FBD600;      /* amarillo del círculo */
    --text: #ffffff;
  }

  .btn-category{
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: var(--black);
    color: var(--text);
    height: var(--btn-h);
    padding: 0 18px;
    border-radius: 999px;                /* forma píldora */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 900 16px/1 "fixture", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
    overflow: hidden;                    /* para contener el icono */
  }
  .btn-category:hover{
    background: #333333;
     font-size: 17px;
  }
  .btn-category:focus-visible{
    outline: 1px solid #ffffff;
    outline-offset: 1px;
   
   
  }

  .btn-category .label{ white-space: nowrap; }

  /* Círculo amarillo + símbolo + (se mueven juntos) */
  .btn-category .icon{
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 50%;
    background: var(--yellow);
    display: grid; place-items: center;
    /* transición sobre transform para que traslade y rote suave */
    transition: transform .50s ease;
    /* estado inicial sin desplazamiento ni rotación */
    transform: translateX(0) rotate(0deg);
    will-change: transform;
  }

  /* Hover: desplaza y además rota 180° */
  .btn-category:hover .icon,
  .btn-category:focus-visible .icon{
    transform: translateX(14px) rotate(180deg);
  }

  /* “+” en SVG (negro, centrado) */
  .btn-category .icon svg{
    width: 30px;
    height: 30px;
    display: block;
  }

  /* Respeto por prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    .btn-category, .icon { transition: none; }
  }
.title {
	color: #5C6AC4;
}
  :root{
    --btn-h: 50px;          /* alto del botón */
    --btn-w: 180px;          /* alto del botón */
    --black: #000000;
    --yellow: #FBD600;      /* amarillo del círculo */
    --text: #ffffff;
  }

  .btn-category{
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: var(--black);
    color: var(--text);
    height: var(--btn-h);
    padding: 0 18px;
    border-radius: 999px;                /* forma píldora */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 900 16px/1 "fixture", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
    overflow: hidden;                    /* para contener el icono */
  }
  .btn-category:hover{
   
    background: #333333;
     font-size: 17px;
 
  }
  .btn-category:focus-visible{
    outline: 1px solid #ffffff;
    outline-offset: 1px;
   
   
  }

  .label{ white-space: nowrap; }

  /* Círculo amarillo + símbolo + (se mueven juntos) */
  .icon{
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 50%;
    background: var(--yellow);
    display: grid; place-items: center;
    /* transición sobre transform para que traslade y rote suave */
    transition: transform .50s ease;
    /* estado inicial sin desplazamiento ni rotación */
    transform: translateX(0) rotate(0deg);
    will-change: transform;
  }

  /* Hover: desplaza y además rota 180° */
  .btn-category:hover .icon,
  .btn-category:focus-visible .icon{
    transform: translateX(14px) rotate(180deg);
  }

  /* “+” en SVG (negro, centrado) */
  .icon svg{
    width: 30px;
    height: 30px;
    display: block;
  }

  /* Respeto por prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    .btn-category, .icon { transition: none; }
  }