/* ==========================================================================
   BOTONES — cuatro tipos. Todos con tokens; sin !important.

   1. .btn-chip    píldora transparente, fondo suave al hover (menú)
   2. .btn-ripple  píldora con borde; sube un relleno y el texto se desliza
   3. .btn-arrow   texto + flecha; la flecha sale por la derecha y entra por la izquierda
   4. .btn-line    texto; una línea entra por la izquierda y se retira por la derecha

   Tamaños: .btn-ripple--sm (38 px de alto, fs-xs; tarjetas de la home y cabeceras de listado)

   Marcado:
     <a class="btn-chip" href="#"><span class="btn-chip__text" data-text="Texto"><span>Texto</span></span></a>
       (el texto sube y entra su duplicado; sin el span interior es un chip plano)

     <a class="btn-ripple" href="#"><span class="btn-ripple__text" data-text="Texto">Texto</span></a>
       modificadores: .btn-ripple--inverse (sobre fondo oscuro) · .btn-ripple--accent (cian, CTA)
                      .btn-ripple--asistencia | --docencia | --investigacion | --desarrollo (color de área)

     <a class="btn-arrow" href="#">Texto
       <span class="btn-arrow__icon" aria-hidden="true">
         <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </span>
     </a>

     <a class="btn-line" href="#">Texto</a>
   ========================================================================== */

/* ---------- Base común ---------- */

.btn-chip,
.btn-ripple,
.btn-arrow,
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

:where(button).btn-chip,
:where(button).btn-ripple,
:where(button).btn-arrow,
:where(button).btn-line {
  border: 0;
  background: none;
  font: inherit;
}

/* ---------- 1. Chip ---------- */

.btn-chip {
  padding: .55em .9em;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.btn-chip:hover,
.btn-chip.is-active {
  background: var(--c-bg-soft);
}

.btn-chip__text {
  position: relative;
  display: block;
  overflow: clip;
  line-height: 1.3;
}

.btn-chip__text>span,
.btn-chip__text::after {
  display: block;
  transition: transform .8s var(--ease-out);
}

.btn-chip__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(110%) scale(.9);
  transform-origin: left center;
}

/* El mismo gesto lo usan los chips de filtro (.news-chip, .ev-filtro) y las pestañas (.tabs__tab):
   basta con envolver el texto en .btn-chip__text > span */
:is(.btn-chip, .news-chip, .ev-filtro, .tabs__tab):is(:hover, :focus-visible) .btn-chip__text>span {
  transform: translateY(-110%);
}

:is(.btn-chip, .news-chip, .ev-filtro, .tabs__tab):is(:hover, :focus-visible) .btn-chip__text::after {
  transform: none;
}

/* ---------- 2. Ripple ---------- */

.btn-ripple {
  --btn-fg: var(--c-ink);
  --btn-bg: transparent;
  --btn-fill: var(--c-ink);
  --btn-fg-hover: var(--c-text-inv);
  --btn-border: currentColor;

  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 1em 1.6em;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transform: translateZ(0);
  /* recorte limpio del relleno en Safari */
}

/* Tamaño S: mismo ripple, más bajo y con letra xs */
.btn-ripple--sm {
  min-height: 2.375rem;
  padding: 0 1.48rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-body);
}

.btn-ripple::before {
  /* relleno que sube */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  border-radius: 50% 50% 0 0;
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.4, 0, 0, 1), border-radius .5s cubic-bezier(.4, 0, 0, 1);
  transition: transform .8s var(--ease-out), border-radius .5s cubic-bezier(.4, 0, 0, 1);
}

.btn-ripple:hover::before {
  transform: none;
  border-radius: 0;
  transition-duration: .5s, .9s;
}

.btn-ripple__text {
  position: relative;
  display: block;
  overflow: clip;
}

.btn-ripple__text>span,
.btn-ripple__text::after {
  display: block;
  transition: transform .8s var(--ease-glide);
}

.btn-ripple__text::after {
  /* duplicado que entra desde abajo */
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(110%);
  color: var(--btn-fg-hover);
}

.btn-ripple:hover .btn-ripple__text>span {
  transform: translateY(-110%);
}

.btn-ripple:hover .btn-ripple__text::after {
  transform: none;
}

/* si el texto va suelto (sin <span> interior) también funciona: */
.btn-ripple__text:not(:has(> span)) {
  transition: color .3s var(--ease-out);
}

.btn-ripple:hover .btn-ripple__text:not(:has(> span)) {
  color: var(--btn-fg-hover);
}

.btn-ripple--inverse {
  --btn-fg: var(--c-text-inv);
  --btn-fill: var(--c-text-inv);
  --btn-fg-hover: var(--c-ink);
}

.btn-ripple--accent {
  --btn-fg: var(--c-on-accent);
  --btn-bg: var(--c-accent);
  --btn-fill: var(--c-ink);
  --btn-fg-hover: var(--c-text-inv);
  --btn-border: transparent;
}

/* Áreas: borde y texto en el tono -ink (legible sobre claro); al hover se rellena
   con el color del área y el texto pasa a navy (≥ 3,9:1 en las cuatro). */
.btn-ripple--asistencia {
  --btn-area: var(--area-asistencia);
  --btn-area-ink: var(--area-asistencia-ink);
}

.btn-ripple--docencia {
  --btn-area: var(--area-docencia);
  --btn-area-ink: var(--area-docencia-ink);
}

.btn-ripple--investigacion {
  --btn-area: var(--area-investigacion);
  --btn-area-ink: var(--area-investigacion-ink);
}

.btn-ripple--desarrollo {
  --btn-area: var(--area-desarrollo);
  --btn-area-ink: var(--area-desarrollo-ink);
}

.btn-ripple--asistencia,
.btn-ripple--docencia,
.btn-ripple--investigacion,
.btn-ripple--desarrollo {
  --btn-fg: var(--btn-area-ink);
  --btn-border: var(--btn-area-ink);
  --btn-fill: var(--btn-area);
  --btn-fg-hover: var(--c-ink);
}

/* Sobre fondo oscuro: el mismo relleno, pero borde y texto en el color base */
.section--dark .btn-ripple--asistencia,
.section--deep .btn-ripple--asistencia,
.section--dark .btn-ripple--docencia,
.section--deep .btn-ripple--docencia,
.section--dark .btn-ripple--investigacion,
.section--deep .btn-ripple--investigacion,
.section--dark .btn-ripple--desarrollo,
.section--deep .btn-ripple--desarrollo {
  --btn-fg: var(--btn-area);
  --btn-border: var(--btn-area);
}

/* ---------- 3. Arrow ---------- */

.btn-arrow {
  gap: .5em;
}

.btn-arrow__icon {
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  overflow: clip;
  flex: none;
}

.btn-arrow__icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .8s var(--ease-glide);
}

.btn-arrow__icon svg:last-child {
  transform: translateX(-120%);
}

/* El gesto salta al pasar por el propio botón o por el enlace/tarjeta que lo contiene
   (tarjetas de noticias, tarjetas y áreas del megamenú) */
.btn-arrow:hover .btn-arrow__icon svg:first-child,
:is(a, button):hover .btn-arrow__icon svg:first-child {
  transform: translateX(120%);
}

.btn-arrow:hover .btn-arrow__icon svg:last-child,
:is(a, button):hover .btn-arrow__icon svg:last-child {
  transform: none;
}

/* ---------- 4. Line ---------- */

.btn-line {
  position: relative;
  padding-bottom: .15em;
}

.btn-line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  /* en reposo: se retira hacia la derecha */
  transition: transform .45s var(--ease-out);
}

.btn-line:hover::before,
.btn-line.is-active::before {
  transform: none;
  transform-origin: 0 50%;
  /* al entrar: crece desde la izquierda */
}

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

  .btn-ripple::before,
  .btn-ripple__text>span,
  .btn-ripple__text::after,
  .btn-arrow__icon svg,
  .btn-line::before {
    transition: none;
  }
}
.btn-ripple--navy {                   /* relleno navy, texto blanco; al hover se rellena de blanco */
  --btn-fg: var(--c-text-inv);
  --btn-bg: var(--c-ink);
  --btn-fill: var(--c-text-inv);
  --btn-fg-hover: var(--c-ink);
  --btn-border: transparent;
}