/* Agave Style — sistema de detalle: botones, iconos, indicadores y microinteracciones comunes. */

/* ---------- Iconos ---------- */
.i{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}

/* ---------- Progreso de lectura ---------- */
.progress{position:fixed;z-index:70;left:0;right:0;top:0;height:3px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---------- Botones: el texto rueda y la flecha cruza ---------- */
.btn{--btn-i:var(--teal-950);--btn-ic:var(--gold);position:relative;overflow:hidden;gap:1.1rem;padding:.4rem .4rem .4rem 1.55rem;isolation:isolate}
.btn[data-enh]:hover{transform:none}
.btn--teal{--btn-i:var(--gold);--btn-ic:var(--teal-950)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;--btn-i:currentColor;--btn-ic:var(--teal-950)}
.btn__roll{display:block;height:1.3em;line-height:1.3;overflow:hidden}
.btn__roll>span{display:block;transition:transform .55s var(--ease)}
.btn:hover .btn__roll>span,.btn:focus-visible .btn__roll>span{transform:translateY(-100%)}
.btn__i{position:relative;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--btn-i);color:var(--btn-ic);overflow:hidden;transition:transform .5s var(--ease)}
.btn__i .i{grid-area:1/1;width:1.05rem;height:1.05rem;transition:transform .55s var(--ease)}
.btn__i .i+.i{transform:translateX(-190%)}
.btn:hover .btn__i .i:first-child,.btn:focus-visible .btn__i .i:first-child{transform:translateX(190%)}
.btn:hover .btn__i .i+.i,.btn:focus-visible .btn__i .i+.i{transform:none}

/* ---------- Enlaces con flecha (CTA) ---------- */
.cta i{overflow:hidden}
.cta i svg{transition:transform .5s var(--ease)}
.cta:hover i svg{transform:translateX(.3rem)}
.ulink{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:.15em;text-decoration:none;transition:background-size .45s var(--ease)}
.ulink:hover,.ulink:focus-visible{background-size:100% 1px}
.nav__menu .nav__burger i{transition:transform .35s var(--ease),width .35s var(--ease)}
@media (hover:hover){.nav__menu:hover .nav__burger i:last-child{width:70%;margin-left:auto}.nav__menu[aria-expanded=true]:hover .nav__burger i:last-child{width:100%}}

/* ---------- Etiquetas, estados y números ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-weight:600;font-size:.88rem;letter-spacing:.02em;color:var(--ac,var(--gold))}
.eyebrow b{font-family:var(--display);font-weight:400;font-size:1.05rem}
.eyebrow::after{content:"";width:2.6rem;height:1px;background:currentColor;transform-origin:left;transition:transform .6s var(--ease)}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .7rem;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;font-weight:600;font-size:.82rem;letter-spacing:.02em;backdrop-filter:blur(6px)}
.dot{position:relative;width:.55rem;height:.55rem;border-radius:50%;background:var(--ac,var(--gold))}
.dot::after{content:"";position:absolute;inset:-.35rem;border-radius:50%;border:1px solid var(--ac,var(--gold));animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}

/* ---------- Cinta que avanza (se acelera con el scroll) ---------- */
.marq2{overflow:hidden;white-space:nowrap;user-select:none}
.marq2__row{display:inline-flex;align-items:center;gap:clamp(1.2rem,3vw,3rem);will-change:transform;padding-right:clamp(1.2rem,3vw,3rem)}
.marq2__row span{font-family:var(--display);font-size:clamp(2.2rem,6vw,6.5rem);line-height:1.1;display:inline-flex;align-items:center;gap:clamp(1.2rem,3vw,3rem)}
.marq2__row .i{width:.55em;height:.55em;opacity:.9}
.marq2--outline span:not(.keep){color:transparent;-webkit-text-stroke:1.5px currentColor}

/* ---------- Sello giratorio ---------- */
.seal{position:relative;display:grid;place-items:center;width:clamp(6.5rem,10vw,9rem);aspect-ratio:1;color:var(--ac,var(--gold))}
.seal svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.seal text{font:600 10.5px var(--body);letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
.seal .i{width:34%;height:34%}
.seal:hover svg.ring{animation-duration:6s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Cursor con etiqueta (zonas con data-cursor) ---------- */
.cursor{position:fixed;z-index:95;left:0;top:0;width:5.2rem;height:5.2rem;margin:-2.6rem 0 0 -2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--teal-950);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;opacity:0;scale:.4;transition:opacity .25s,scale .35s var(--ease)}
.cursor.is-on{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Inclinación de producto ---------- */
[data-tilt]{will-change:transform;transform-style:preserve-3d}

/* ---------- Tarjeta de contador ---------- */
.counter{display:grid;gap:.25rem}
.counter b{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,5vw,4.8rem);line-height:1;color:var(--ac,var(--gold));font-variant-numeric:tabular-nums}
.counter span{font-size:.92rem;opacity:.8;max-width:18ch}

@media (prefers-reduced-motion:reduce){
  .dot::after,.seal svg.ring{animation:none}
  .btn__roll>span,.btn__i .i{transition:none}
}