/* =========================================================
   BOTONES CON ANIMACIÓN (de La Tetera, adaptado a Equilatera)
   ---------------------------------------------------------
   Se aplica a:
     - Botones de Salient: normal (.regular-button) y "see-through"
     - Botones de los componentes propios (a.eq-btn)
   - Fondo: cortina que sube desde abajo, inclinada, y se
     endereza al llegar arriba.
   - Texto: sube y aparece una copia desde abajo (en Salient lo
     envuelve js/buttons.js; en .eq-btn ya viene en el HTML).

   La cortina es un degradado del propio botón (background-image)
   animado con @property, no un ::before girado: así no hay capa
   recortada por el borde redondeado y Chrome no deja "picos" en
   las curvas con escalados fraccionarios (125 %, 175 %…), que es
   lo que pasaba en los botones con borde.

   Variables por botón (o en :root):
     --btn-fill        color del relleno en hover
     --btn-text-hover  color del texto en hover
   Clases de color para el campo "Extra class" del botón:
     btn-fill-accent, btn-fill-secondary, btn-fill-dark,
     btn-fill-cream, btn-fill-light
   ========================================================= */

@property --btn-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --btn-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 12deg;
}

/* ---------- Base de los botones de componentes (antes en style.css) ---------- */
a.eq-btn {
  --eq-btn-h: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--eq-btn-h);
  padding: 0 30px;
  border: 2px solid var(--accent);
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
a.eq-btn--solid {
  background-color: var(--accent);
  color: var(--light);
}
a.eq-btn--outline {
  background-color: transparent;
  color: var(--accent);
}
a.eq-btn .eq-btn__icon {
  flex: none;
  display: block;
}
@media (min-width: 1000px) {
  a.eq-btn {
    --eq-btn-h: max(40px, calc(42 / 1440 * 100vw));
    font-size: max(12px, var(--fnt-size-tiny));
    padding: 0 max(24px, calc(30 / 1440 * 100vw));
  }
}
@media (max-width: 999px) {
  a.eq-btn {
    --eq-btn-h: calc(50 / 390 * 100vw);
    font-size: calc(15 / 390 * 100vw);
    padding: 0 calc(28 / 390 * 100vw);
  }
}

/* ---------- Efecto ---------- */
.nectar-button.regular-button,
.nectar-button.see-through,
a.eq-btn {
  --btn-fill: var(--dark);
  --btn-text-hover: var(--light);
  --btn-ease: cubic-bezier(0.625, 0.05, 0, 1);
  --btn-dur: 0.525s;
  --btn-p: 0%;
  --btn-a: 12deg;

  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  background-image: linear-gradient(var(--btn-a), var(--btn-fill) var(--btn-p), transparent calc(var(--btn-p) + 0.6px)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-origin: border-box !important; /* que cubra también la zona del borde */
  transition:
    --btn-p var(--btn-dur) var(--btn-ease),
    --btn-a var(--btn-dur) var(--btn-ease),
    border-color 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease !important;
}

/* El see-through de Salient: borde y relleno del color de acento */
.nectar-button.see-through {
  --btn-fill: var(--accent);
}

/* Anula el relleno antiguo de style.css (a.nectar-button…see-through:before) */
.nectar-button.see-through::before {
  display: none !important;
}

/* Máscara del texto */
.nectar-button.regular-button > span.btn-roll-mask,
.nectar-button.see-through > span.btn-roll-mask,
a.eq-btn .btn-roll-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.15em 0;
  margin: -0.15em 0;
  transform: none !important;
}

.nectar-button .btn-roll,
a.eq-btn .btn-roll {
  --btn-roll-distance: 1.6em;
  display: block;
  text-shadow: 0 var(--btn-roll-distance) var(--btn-text-hover);
  transition: transform var(--btn-dur) var(--btn-ease);
}

/* Iconos de .eq-btn: cambian de color con el relleno */
a.eq-btn .eq-btn__icon {
  transition:
    color var(--btn-dur) var(--btn-ease),
    transform var(--btn-dur) var(--btn-ease);
}

@media (hover: hover) and (pointer: fine) {
  .nectar-button.regular-button:hover,
  .nectar-button.see-through:hover,
  a.eq-btn:hover {
    --btn-p: 100%;
    --btn-a: 0deg;
  }
  .nectar-button.regular-button:hover .btn-roll,
  .nectar-button.see-through:hover .btn-roll,
  a.eq-btn:hover .btn-roll {
    transform: translateY(calc(-1 * var(--btn-roll-distance)));
  }
  a.eq-btn:hover,
  .nectar-button.see-through:hover {
    border-color: var(--btn-fill) !important;
  }
  /* Salient rellena el see-through en hover: lo hace la cortina */
  .nectar-button.see-through:hover {
    background-color: transparent !important;
  }
  a.eq-btn:hover .eq-btn__icon {
    color: var(--btn-text-hover);
  }

  a.eq-btn--solid:hover .eq-btn__icon {
    transform: rotate(45deg);
  }
}

.nectar-button.regular-button:focus-visible,
.nectar-button.see-through:focus-visible,
a.eq-btn:focus-visible {
  --btn-p: 100%;
  --btn-a: 0deg;
}
.nectar-button.regular-button:focus-visible .btn-roll,
.nectar-button.see-through:focus-visible .btn-roll,
a.eq-btn:focus-visible .btn-roll {
  transform: translateY(calc(-1 * var(--btn-roll-distance)));
}
a.eq-btn:focus-visible .eq-btn__icon {
  color: var(--btn-text-hover);
}

/* Relleno por defecto de los botones de componentes */
a.eq-btn--solid {
  --btn-fill: var(--dark);
}
a.eq-btn--outline {
  --btn-fill: var(--accent);
}

/* Colores de relleno por clase */
.btn-fill-accent {
  --btn-fill: var(--accent) !important;
  --btn-text-hover: var(--light) !important;
}
.btn-fill-secondary {
  --btn-fill: var(--secondary) !important;
  --btn-text-hover: var(--light) !important;
}
.btn-fill-dark {
  --btn-fill: var(--dark) !important;
  --btn-text-hover: var(--light) !important;
}
.btn-fill-cream {
  --btn-fill: var(--dark-cream) !important;
  --btn-text-hover: var(--dark) !important;
}
.btn-fill-light {
  --btn-fill: var(--light) !important;
  --btn-text-hover: var(--accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .nectar-button.regular-button,
  .nectar-button.see-through,
  .nectar-button .btn-roll,
  a.eq-btn,
  a.eq-btn .btn-roll,
  a.eq-btn .eq-btn__icon {
    transition-duration: 0.01s !important;
  }
}

/* =========================================================
   BOTONES DEL HEADER (Salient: menú > "Menu Item Style" =
   Button Bordered / Button Solid Color)
   ---------------------------------------------------------
   Salient dibuja la pastilla con a::before. Aquí a::after es
   el relleno: misma pastilla, con un degradado de corte
   inclinado que sube al hacer hover (mismo gesto que la
   cortina de los botones). El texto rueda igual (js/buttons.js
   envuelve .menu-title-text).
   ========================================================= */

#header-outer #top nav > ul > li[class*='button_'] > a {
  --btn-fill: var(--accent);
  --btn-text-hover: var(--light);
  --btn-ease: cubic-bezier(0.625, 0.05, 0, 1);
  --btn-dur: 0.525s;
  isolation: isolate;
}
#header-outer #top nav > ul > li[class*='button_solid_color'] > a {
  --btn-fill: var(--dark);
}

#header-outer #top nav > ul > li[class*='button_'] > a::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  width: 100%;
  height: 34px;
  border-radius: 200px;
  transform: translateY(-50%);
  background-image: linear-gradient(172deg, transparent 50%, var(--btn-fill) calc(50% + 0.5px));
  background-size: 100% 300%;
  background-repeat: no-repeat;
  background-position: 0 0%;
  transition: background-position var(--btn-dur) var(--btn-ease);
  pointer-events: none;
}

/* Salient baja la opacidad del sólido en hover: se anula */
#header-outer #top nav > ul > li[class*='button_solid_color'] > a:hover::before {
  opacity: 1 !important;
}

#header-outer #top nav > ul > li[class*='button_'] > a .menu-title-text.btn-roll-mask {
  white-space: nowrap; /* en dos líneas se veía la copia del texto debajo */
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.15em 0;
  margin: -0.15em 0;
}
#header-outer #top nav > ul > li[class*='button_'] > a .btn-roll {
  --btn-roll-distance: 1.6em;
  display: block;
  text-shadow: 0 var(--btn-roll-distance) var(--btn-text-hover);
  transition: transform var(--btn-dur) var(--btn-ease);
}

@media (hover: hover) and (pointer: fine) {
  #header-outer #top nav > ul > li[class*='button_'] > a:hover::after {
    background-position: 0 100%;
  }
  #header-outer #top nav > ul > li[class*='button_'] > a:hover .btn-roll {
    transform: translateY(calc(-1 * var(--btn-roll-distance)));
  }
}
#header-outer #top nav > ul > li[class*='button_'] > a:focus-visible::after {
  background-position: 0 100%;
}
#header-outer #top nav > ul > li[class*='button_'] > a:focus-visible .btn-roll {
  transform: translateY(calc(-1 * var(--btn-roll-distance)));
}

@media (prefers-reduced-motion: reduce) {
  #header-outer #top nav > ul > li[class*='button_'] > a::after,
  #header-outer #top nav > ul > li[class*='button_'] > a .btn-roll {
    transition-duration: 0.01s;
  }
}