/* ═══════════════════════════════════════════════════════════
   LUVA · COMPONENTES
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   ENCABEZADO
   ─────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: transform var(--t-mid) var(--ease-soft),
              background-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              padding var(--t-mid) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.site-header.is-stuck { padding-block: .7rem; }
.site-header.is-stuck::before {
  opacity: 1;
  border-bottom-color: var(--ink-a10);
}
.site-header.is-hidden { transform: translateY(-102%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  position: relative;
}

/* Marca — roseta con "y" comercial, como una medalla de feria */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}
.brand__mark {
  width: 36px; height: 36px;
  color: var(--seal);
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
  transition: transform var(--t-mid) var(--ease-back);
}
.brand:hover .brand__mark { transform: rotate(8deg) scale(1.08); }
.brand__mark-svg { width: 100%; height: 100%; overflow: visible; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .18rem;
}

/* Navegación */
.nav__list { display: flex; gap: clamp(.9rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  padding-block: .25rem;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--seal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease-soft);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--ink); }

.site-header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Hamburguesa */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--ink-a22);
  border-radius: var(--r-sm);
  place-items: center;
  position: relative;
  background: color-mix(in srgb, var(--paper-3) 70%, transparent);
  transition: background var(--t-fast) var(--ease-out);
}
.burger span {
  position: absolute;
  width: 17px; height: 1.7px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-back), opacity var(--t-fast) var(--ease-out);
}
.burger span:nth-child(1) { transform: translateY(-3.5px); }
.burger span:nth-child(2) { transform: translateY(3.5px); }
.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: rotate(-45deg); }

/* ───────────────────────────────────────────────────────────
   MENÚ MÓVIL
   ─────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: grid;
  align-content: center;
  padding: 7rem var(--gutter) 3rem;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-soft);
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; transform: none; }

.mobile-menu__list { margin-top: 1.4rem; }
.mobile-menu__list li + li { border-top: 1px dashed var(--ink-a15); }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .9rem .2rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t-mid) var(--ease-soft);
}
.mobile-menu__list a:hover { color: var(--seal); padding-left: .8rem; }
.mobile-menu__num {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--seal);
  letter-spacing: .1em;
}
.mobile-menu__list .ic { width: .5em; height: .5em; opacity: .35; margin-left: auto; align-self: center; }

.mobile-menu__foot { margin-top: 2.4rem; display: grid; gap: .9rem; }
.mobile-menu__note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

/* ───────────────────────────────────────────────────────────
   BOTONES
   ─────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper-3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-back),
              box-shadow var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out);
  box-shadow: var(--sh-1);
}
.btn .ic { width: 1.05em; height: 1.05em; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--seal);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-soft);
  border-radius: inherit;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn--sm { padding: .62rem 1.05rem; font-size: .84rem; }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper-3); }

.btn--seal {
  --btn-bg: var(--seal);
  --btn-fg: var(--paper-3);
  box-shadow: var(--sh-seal);
}
.btn--seal::before { background: var(--ink); }

.btn--wa {
  --btn-bg: var(--wa);
  --btn-fg: #fff;
  box-shadow: 0 6px 18px -6px rgba(15,122,53,.5);
}
.btn--wa::before { background: var(--wa-hover); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--ink-a22);
  box-shadow: none;
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--paper-3); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--ink-a35);
  box-shadow: none;
}
.btn--outline::before { background: var(--paper-3); }
.btn--outline:hover { color: var(--ink); border-color: var(--ink); }

.btn--paper {
  --btn-bg: var(--paper-3);
  --btn-fg: var(--ink);
  box-shadow: var(--sh-2);
}
.btn--paper::before { background: var(--blush); }

.btn--block { width: 100%; }

/* Flecha que se desliza dentro del botón */
.btn .ic { transition: transform var(--t-mid) var(--ease-back); }
.btn:hover .ic { transform: translateX(3px); }
.btn--wa:hover .ic { transform: none; }

/* ───────────────────────────────────────────────────────────
   ENLACE CON FLECHA
   ─────────────────────────────────────────────────────────── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  padding-bottom: .2rem;
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--t-mid) var(--ease-soft);
}
.link-arrow:hover::after { transform: scaleX(0); transform-origin: left; }
.link-arrow .ic { transition: transform var(--t-mid) var(--ease-back); }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ───────────────────────────────────────────────────────────
   CINTA WASHI
   ─────────────────────────────────────────────────────────── */
.tape {
  position: absolute;
  width: 78px; height: 26px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.42) 0 3px, transparent 3px 7px),
    linear-gradient(100deg, var(--blush-2), var(--peach-2));
  box-shadow: 0 2px 6px var(--ink-a10);
  opacity: .88;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  transition: transform var(--t-mid) var(--ease-back), opacity var(--t-mid) var(--ease-out);
}
.tape::before, .tape::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.7) 0 2px, transparent 2px 5px);
}
.tape::before { left: 5px; }
.tape::after { right: 5px; }

.tape--tl { top: -11px; left: 26px; transform: rotate(-32deg); }
.tape--tr { top: -11px; right: 26px; transform: rotate(30deg); background:
    repeating-linear-gradient(65deg, rgba(255,255,255,.42) 0 3px, transparent 3px 7px),
    linear-gradient(100deg, var(--lavender-2), var(--blush-2)); }

/* ───────────────────────────────────────────────────────────
   PLACEHOLDER DE IMAGEN — "marca de agua de estudio"
   Pensado para sustituirse por fotografía real.
   Basta con colocar el archivo en /assets/img y mantener el
   atributo data-src (JS lo reemplaza automáticamente).
   ─────────────────────────────────────────────────────────── */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  gap: .7rem;
  width: 100%;
  height: 100%;
  min-height: 150px;
  border-radius: var(--r-md);
  background-color: var(--ph-tint, var(--paper-2));
  background-image:
    var(--tex-fiber),
    radial-gradient(75% 60% at 30% 22%, rgba(255,255,255,.7), transparent 62%);
  border: 1px dashed var(--ink-a22);
  overflow: hidden;
  isolation: isolate;
}
.ph::before,
.ph::after {
  /* Marcas de corte, detalle de imprenta */
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 0 solid var(--ink);
  opacity: .3;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out);
}
.ph::before { top: 9px; left: 9px; border-top-width: 1px; border-left-width: 1px; }
.ph::after { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; }
.ph:hover::before, .ph:hover::after { opacity: .6; }

.ph__icon {
  width: clamp(38px, 16%, 62px);
  height: auto;
  color: var(--ink-3);
  opacity: .5;
  transition: transform var(--t-slow) var(--ease-back), opacity var(--t-mid) var(--ease-out);
}
/* Si el ícono llega sin clase, se limita igual para que no invada
   toda la caja del placeholder. */
.ph > svg { width: clamp(38px, 16%, 62px); height: auto; flex: none; }
.ph:hover .ph__icon { transform: translateY(-4px) rotate(-4deg) scale(1.06); opacity: .7; }

.ph__cap {
  font-family: var(--font-mono);
  font-size: clamp(.6rem, 1.7vw, .68rem);
  letter-spacing: .1em;
  color: var(--ink-4);
  text-transform: uppercase;
  padding: .25em .7em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper-3) 70%, transparent);
  border: 1px solid var(--ink-a10);
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph__cap::before {
  content: "◦ ";
  color: var(--seal);
}

.ph--tall { aspect-ratio: 4 / 5; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 9; }

/* Variante ya cargada con foto real */
.ph.is-image { border-style: solid; border-color: var(--ink-a10); background-image: none; }
/* Se ocultan el ícono y la leyenda, pero nunca la foto */
.ph.is-image > *:not(.ph__img) { display: none; }
.ph__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: phIn .9s var(--ease-out) both;
}
@keyframes phIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* ───────────────────────────────────────────────────────────
   CHIPS (constructor de pedidos)
   ─────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }

.chip {
  --c: var(--paper-3);
  position: relative;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-a22);
  background: var(--c);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: transform var(--t-mid) var(--ease-back),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.chip:hover { transform: translateY(-2px); border-color: var(--ink-4); box-shadow: var(--sh-1); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-3);
  box-shadow: var(--sh-2);
}
.chip.is-active::after {
  content: "";
  position: absolute;
  right: 7px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--seal);
  transform: translateY(-50%);
  animation: pop .4s var(--ease-back);
}
@keyframes pop { from { transform: translateY(-50%) scale(0); } to { transform: translateY(-50%) scale(1); } }

/* ───────────────────────────────────────────────────────────
   CAMPOS DE TEXTO
   ─────────────────────────────────────────────────────────── */
.field { display: grid; gap: .45rem; flex: 1 1 240px; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field__input {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-a22);
  background: var(--paper-3);
  font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--ink-4); font-style: italic; }
.field__input:focus {
  outline: none;
  border-color: var(--seal);
  box-shadow: 0 0 0 3px var(--seal-a12);
}

/* ───────────────────────────────────────────────────────────
   MUESTRAS DE COLOR
   ─────────────────────────────────────────────────────────── */
.swatches { display: grid; gap: .45rem; }
.swatches__list { display: flex; gap: .5rem; }
.swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--paper-3);
  box-shadow: 0 0 0 1px var(--ink-a22);
  transition: transform var(--t-mid) var(--ease-back), box-shadow var(--t-fast) var(--ease-out);
  position: relative;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--ink);
}
.swatch.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
}

/* ───────────────────────────────────────────────────────────
   SELLO CIRCULAR GIRATORIO
   ─────────────────────────────────────────────────────────── */
.seal-badge {
  position: relative;
  width: 122px; height: 122px;
  display: grid;
  place-items: center;
  color: var(--seal);
}
.seal-badge__ring {
  position: absolute;
  inset: 0;
  animation: spin 26s linear infinite;
}
.seal-badge__ring text {
  font-family: var(--font-mono);
  font-size: 11.2px;
  letter-spacing: .26em;
  font-weight: 700;
  fill: currentColor;
  text-transform: uppercase;
}
.seal-badge__mark { width: 30px; height: 30px; opacity: .95; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────────────────────────────────────
   AVATAR CON INICIALES
   ─────────────────────────────────────────────────────────── */
.avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c, var(--blush));
  background-image: var(--tex-noise);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-a12), var(--sh-1);
}

/* ───────────────────────────────────────────────────────────
   ESTRELLAS
   ─────────────────────────────────────────────────────────── */
.stars, .trust__stars { display: inline-flex; gap: .12em; }
.stars .ic, .trust__stars .ic { width: .95em; height: .95em; color: var(--seal); }
@keyframes twinkle { 0%,100% { opacity: 1; } 45% { opacity: .45; } 55% { opacity: .45; } }

/* ───────────────────────────────────────────────────────────
   WHATSAPP FLOTANTE
   ─────────────────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* Se le suma lo que ocupe la insignia de Netlify en esa misma
     esquina. main.js mide esa altura y la deja en --insignia.
     En una computadora sin insignia vale 0 y queda como siempre. */
  bottom: calc(clamp(1rem, 3vw, 2rem) + var(--insignia, 0px) + 10px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem .8rem .85rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  box-shadow: 0 10px 30px -8px rgba(15,122,53,.55), var(--sh-2);
  transform: translateY(140%);
  transition: transform var(--t-slow) var(--ease-back), box-shadow var(--t-mid) var(--ease-out);
}
.wa-float.is-in { transform: none; }
.wa-float:hover { box-shadow: 0 14px 38px -8px rgba(15,122,53,.7); }
.wa-float__icon { width: 22px; height: 22px; }
.wa-float__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--wa);
  animation: pulse 2.8s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .6; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ───────────────────────────────────────────────────────────
   TARJETA DE PRESENTACIÓN (contacto)
   ─────────────────────────────────────────────────────────── */
.vcard {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  transform: rotate(3.2deg);
  transition: transform var(--t-slow) var(--ease-back), box-shadow var(--t-slow) var(--ease-out);
}
.vcard:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--sh-4); }

.vcard__inner {
  position: relative;
  background: var(--paper-3);
  background-image: var(--tex-fiber);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--sh-3);
  border: 1px solid var(--ink-a10);
  overflow: hidden;
}
.vcard__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tex-noise);
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.vcard__brand {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}
.vcard__role {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--seal-deep);
  line-height: 1.2;
  margin-top: .3rem;
}
.vcard__rule {
  height: 0;
  border-top: 1px dashed var(--ink-a22);
  margin: 1.5rem 0;
}
.vcard__meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 2;
  color: var(--ink-2);
}
.vcard__stamp {
  position: absolute;
  right: 1.6rem; bottom: 1.6rem;
  width: 96px; height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--seal-a25);
  color: var(--seal);
  transform: rotate(-12deg);
  opacity: .85;
}
.vcard__stamp-ring {
  position: absolute;
  inset: 0;
  animation: spin 22s linear infinite;
}
.vcard__stamp-ring text {
  font-family: var(--font-mono);
  font-size: 9.4px;
  letter-spacing: .1em;
  font-weight: 700;
  fill: currentColor;
}
.vcard__stamp-mark { width: 26px; height: 26px; }

/* Línea de corte troquelada */
.vcard__perf {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.vcard__perf::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  border-top: 2px dashed var(--ink-a15);
}
.vcard__scissor {
  position: absolute;
  right: -6px; top: -10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink-3);
  border-radius: 50%;
}
.vcard__scissor svg { width: 15px; height: 15px; }

/* ───────────────────────────────────────────────────────────
   BOTÓN VOLVER ARRIBA
   ─────────────────────────────────────────────────────────── */
.to-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  margin-top: .9rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  color: var(--paper);
  font-size: .82rem;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.to-top:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); border-color: var(--paper); }
.to-top .ic { transform: rotate(45deg); transition: transform var(--t-mid) var(--ease-back); }
.to-top:hover .ic { transform: rotate(225deg); }