/* ===================================================================
   hero-button.css — REEMPLAZA COMPLETAMENTE el archivo anterior.
   Botón Arrow Fill para Le Antigua, HTML/CSS puro.
   Reposo: dorado #ffd876 + texto verde oscuro #0a322d.
   Hover: el verde oscuro nace como círculo detrás de la flecha y cubre
   el botón; el texto se revela en crema #f0eadc sin desaparecer.
   =================================================================== */

.afb-vault {
  --btn-bg: #ffd876;
  --btn-text: #0a322d;
  --btn-fill: #0a322d;
  --btn-fill-text: #f0eadc;
  --icon-size: 38px;
  --icon-right: 6px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
  min-width: 176px;
  padding: 0 calc(var(--icon-size) + var(--icon-right) + 22px) 0 28px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Texto base: verde oscuro, visible únicamente antes del hover. */
.afb-vault-label {
  position: relative;
  z-index: 3;
  display: block;
  padding-bottom: 1px;
  color: var(--btn-text);
  white-space: nowrap;
}

/* Círculo verde que empieza detrás del icono y se expande. */
.afb-vault-fill {
  position: absolute;
  z-index: 1;
  top: calc((100% - var(--icon-size)) / 2);
  right: var(--icon-right);
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background: var(--btn-fill);
  pointer-events: none;
  transition:
    width 450ms cubic-bezier(.785, .135, .15, .86),
    height 450ms cubic-bezier(.785, .135, .15, .86),
    top 450ms cubic-bezier(.785, .135, .15, .86),
    right 450ms cubic-bezier(.785, .135, .15, .86),
    border-radius 450ms cubic-bezier(.785, .135, .15, .86);
}

/* Segunda capa del texto: crema. Se revela solo donde ya avanzó el círculo. */
.afb-vault-clip {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--icon-size) + var(--icon-right) + 22px) 0 28px;
  overflow: hidden;
  color: var(--btn-fill-text);
  pointer-events: none;
  clip-path: circle(20px at calc(100% - 26px) 50%);
  -webkit-clip-path: circle(20px at calc(100% - 26px) 50%);
  transition:
    clip-path 450ms cubic-bezier(.785, .135, .15, .86),
    -webkit-clip-path 450ms cubic-bezier(.785, .135, .15, .86);
}

.afb-vault-clip-inner {
  display: block;
  padding-bottom: 1px;
  color: inherit;
  white-space: nowrap;
}

/* Círculo del extremo: permanece verde oscuro y la flecha es crema. */
.afb-vault-icon {
  position: absolute;
  z-index: 5;
  top: calc((100% - var(--icon-size)) / 2);
  right: var(--icon-right);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  pointer-events: none;
}

/* Dos flechas pequeñas y controladas. */
.afb-vault-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  transform-origin: center;
  transition: transform 450ms cubic-bezier(.785, .135, .15, .86);
}

.afb-vault-arrow-in {
  transform: translate(-175%, -50%) scale(.55);
}

.afb-vault-arrow-out {
  transform: translate(-50%, -50%) scale(1);
}

/* Estado hover/teclado/touch: el círculo verde se convierte en el botón. */
.afb-vault:hover .afb-vault-fill,
.afb-vault:focus-visible .afb-vault-fill,
.afb-vault[data-pressed="true"] .afb-vault-fill {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.afb-vault:hover .afb-vault-clip,
.afb-vault:focus-visible .afb-vault-clip,
.afb-vault[data-pressed="true"] .afb-vault-clip {
  clip-path: circle(150% at calc(100% - 26px) 50%);
  -webkit-clip-path: circle(150% at calc(100% - 26px) 50%);
}

.afb-vault:hover .afb-vault-arrow-in,
.afb-vault:focus-visible .afb-vault-arrow-in,
.afb-vault[data-pressed="true"] .afb-vault-arrow-in {
  transform: translate(-50%, -50%) scale(1);
}

.afb-vault:hover .afb-vault-arrow-out,
.afb-vault:focus-visible .afb-vault-arrow-out,
.afb-vault[data-pressed="true"] .afb-vault-arrow-out {
  transform: translate(75%, -50%) scale(.55);
}

.afb-vault:focus-visible {
  outline: 2px solid #f0eadc;
  outline-offset: 4px;
}

.afb-vault:active {
  transform: translateY(1px);
}

@media (max-width:640px) {
  .afb-vault {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding-left: 28px;
    font-size: 12px;
  }
}

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

  .afb-vault-fill,
  .afb-vault-clip,
  .afb-vault-arrow {
    transition: none;
  }
}