/* ============================================================
   FORO UBRE
   VIDEOS.CSS
   iOS 27 / Liquid Glass / Carbon
   MISMA IDENTIDAD VISUAL DEL INDEX.CSS
   ============================================================ */


/* ============================================================
   01 — RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background: #050606;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;

  overflow: hidden;

  color: #f4f6f4;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    system-ui,
    sans-serif;

  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(76, 255, 130, .055),
      transparent 30%
    ),
    radial-gradient(
      circle at 84% 75%,
      rgba(72, 150, 255, .035),
      transparent 28%
    ),
    #050606;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  -webkit-user-select: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   02 — VARIABLES
   MISMAS BASES DEL INDEX
   ============================================================ */

:root {

  --bg:
    #050606;

  --bg-2:
    #080909;

  --glass:
    rgba(20,22,21,.70);

  --glass-strong:
    rgba(17,19,18,.88);

  --glass-soft:
    rgba(255,255,255,.035);

  --glass-highlight:
    rgba(255,255,255,.075);

  --border:
    rgba(255,255,255,.085);

  --border-strong:
    rgba(255,255,255,.13);

  --text:
    #f4f6f4;

  --text-2:
    #a5aaa6;

  --text-3:
    #686e6a;

  --green:
    #72f28b;

  --green-2:
    #4bd96b;

  --green-soft:
    rgba(114,242,139,.11);

  --green-glow:
    rgba(114,242,139,.18);

  --red:
    #ff4e68;

  --red-soft:
    rgba(255,78,104,.12);

  --radius-sm:
    12px;

  --radius:
    18px;

  --radius-lg:
    26px;

  --radius-xl:
    32px;

  --pill:
    999px;

  --ease:
    cubic-bezier(.22,.75,.25,1);

}


/* ============================================================
   03 — CARBON BACKGROUND
   ============================================================ */

.carbon-bg {
  position: fixed;
  inset: 0;

  z-index: -10;

  pointer-events: none;

  opacity: .26;

  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,.018) 25%,
      transparent 25%
    ),
    linear-gradient(
      315deg,
      rgba(255,255,255,.014) 25%,
      transparent 25%
    );

  background-size:
    7px 7px,
    7px 7px;

  background-position:
    0 0,
    3px 3px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      rgba(0,0,0,.72)
    );
}


.ambient {
  position: fixed;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(110px);

  opacity: .055;

  z-index: -9;
}


.ambient-one {
  top: -270px;
  left: -180px;

  background: #5cff82;
}


.ambient-two {
  right: -280px;
  bottom: -280px;

  background: #5c8aff;
}


/* ============================================================
   04 — VIDEO FEED
   ============================================================ */

.vf-feed {
  position: relative;

  width: 100%;
  height: 100dvh;

  overflow-y: scroll;
  overflow-x: hidden;

  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;

  scrollbar-width: none;

  overscroll-behavior-y: contain;

  background:
    #050606;
}

.vf-feed::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   05 — VIDEO ITEM
   ============================================================ */

.vf-item {
  position: relative;

  width: 100%;
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  isolation: isolate;

  background:
    #050606;

  animation:
    video-enter .55s var(--ease) both;
}


@keyframes video-enter {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


.vf-item.removing {
  opacity: 0;

  transform:
    scale(.97);

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* ============================================================
   06 — VIDEO
   ============================================================ */

.vf-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background:
    #050606;

  z-index: 1;
}


/*
  Oscurecimiento extremadamente suave para que
  los controles siempre se lean sin destruir el video.
*/

.vf-item::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 45%,
      transparent 28%,
      rgba(0,0,0,.10) 100%
    );
}


/* ============================================================
   07 — TOP BAR
   ============================================================ */

.vf-top {
  position: fixed;

  top: 16px;
  left: 50%;

  transform:
    translateX(-50%);

  width:
    min(760px, calc(100% - 28px));

  height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    8px 10px;

  z-index: 100;

  border:
    1px solid var(--border);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(28,31,29,.76),
      rgba(11,13,12,.70)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 18px 55px rgba(0,0,0,.34);

  backdrop-filter:
    blur(24px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(125%);

  animation:
    topbar-in .55s var(--ease) both;
}


@keyframes topbar-in {

  from {
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(-12px);
  }

  to {
    opacity: 1;
    transform:
      translateX(-50%)
      translateY(0);
  }

}


.vf-top::before {
  content: "";

  position: absolute;

  top: 0;
  left: 14%;
  right: 14%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  pointer-events: none;
}


.vf-top-btn {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    15px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size: 19px;

  cursor: pointer;

  transition:
    color .2s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease),
    transform .2s var(--ease),
    box-shadow .2s var(--ease);
}


.vf-top-btn:hover {
  color:
    var(--text);

  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.12);

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 20px rgba(0,0,0,.22);
}


.vf-top-btn:active {
  transform:
    scale(.94);
}


.vf-upload-top-btn {
  color:
    #061008;

  border-color:
    transparent;

  background:
    linear-gradient(
      145deg,
      #a0ffad,
      #48dc67
    );

  box-shadow:
    0 8px 24px rgba(71,225,101,.14),
    inset 0 1px 1px rgba(255,255,255,.65);
}


.vf-upload-top-btn:hover {
  color:
    #061008;

  border-color:
    transparent;

  background:
    linear-gradient(
      145deg,
      #aaffb5,
      #55e374
    );

  box-shadow:
    0 12px 28px rgba(71,225,101,.22),
    inset 0 1px 1px rgba(255,255,255,.7);
}


.vf-top-title {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
}


.vf-top-eyebrow {
  display: flex;
  align-items: center;

  gap: 6px;

  color:
    var(--text-3);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 1.35px;
}


.vf-live-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 10px
    rgba(114,242,139,.7);
}


.vf-top-title h2 {
  margin: 2px 0 0;

  display: flex;
  align-items: center;

  gap: 6px;

  color:
    var(--text);

  font-size: 15px;

  line-height: 1;

  letter-spacing:
    -.3px;

  font-weight: 780;
}


.vf-top-title h2 i {
  color:
    var(--green);

  font-size: 15px;
}


/* ============================================================
   08 — TOP VIDEO DECORATION
   ============================================================ */

.vf-video-badge {
  position: absolute;

  top: 100px;
  left: 50%;

  transform:
    translateX(-50%);

  z-index: 8;

  pointer-events: none;
}


.vf-video-badge span {
  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    7px 11px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    var(--pill);

  color:
    rgba(255,255,255,.62);

  background:
    rgba(9,11,10,.48);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .9px;
}


.vf-video-badge i {
  color:
    var(--green);

  font-size: 11px;
}


/* ============================================================
   09 — TOP OVERLAY
   ============================================================ */

.vf-overlay-top {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 240px;

  z-index: 5;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.20) 42%,
      transparent 100%
    );
}


/* ============================================================
   10 — BOTTOM OVERLAY
   ============================================================ */

.vf-overlay-bottom {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 7;

  padding:
    150px 115px 48px 30px;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.60) 25%,
      rgba(0,0,0,.20) 60%,
      transparent 100%
    );
}


.vf-user-row {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 11px;

  pointer-events: auto;

  cursor: pointer;

  transition:
    transform .2s var(--ease);
}


.vf-user-row:hover {
  transform:
    translateX(2px);
}


.vf-avatar-btn {
  width: 43px;
  height: 43px;

  display: block;

  overflow: hidden;

  flex-shrink: 0;

  border:
    1.5px solid rgba(255,255,255,.28);

  border-radius:
    50%;

  background:
    #111512;

  box-shadow:
    0 7px 20px rgba(0,0,0,.3),
    0 0 0 3px rgba(114,242,139,.045);
}


.vf-avatar-btn img,
.vf-avatar-btn video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.vf-user-copy {
  min-width: 0;
}


.vf-autor-nombre {
  color:
    #fff;

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    -.2px;

  text-shadow:
    0 2px 12px rgba(0,0,0,.5);
}


.vf-autor-handle {
  margin-top: 3px;

  color:
    rgba(255,255,255,.57);

  font-size:
    11px;
}


.vf-desc {
  max-width:
    min(580px, calc(100vw - 170px));

  margin:
    0;

  color:
    rgba(255,255,255,.90);

  font-size:
    13px;

  line-height:
    1.55;

  display:
    -webkit-box;

  -webkit-line-clamp:
    3;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;

  text-shadow:
    0 2px 10px rgba(0,0,0,.5);
}


.vf-vistas {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 9px;

  color:
    rgba(255,255,255,.46);

  font-size:
    10px;
}


.vf-vistas i {
  color:
    rgba(255,255,255,.55);

  font-size:
    13px;
}


/* ============================================================
   11 — ACTIONS
   ============================================================ */

.vf-actions {
  position: absolute;

  right: 26px;
  bottom: 86px;

  z-index: 12;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 13px;

  padding:
    9px 7px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    23px;

  background:
    rgba(12,14,13,.46);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 15px 45px rgba(0,0,0,.28);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.vf-action-profile {
  width: 45px;
  height: 45px;

  padding: 0;

  overflow: hidden;

  border:
    2px solid rgba(255,255,255,.75);

  border-radius:
    50%;

  background:
    #111;

  cursor: pointer;

  box-shadow:
    0 5px 20px rgba(0,0,0,.35);

  transition:
    transform .2s var(--ease),
    border-color .2s ease;
}


.vf-action-profile:hover {
  transform:
    scale(1.06);

  border-color:
    var(--green);
}


.vf-action-profile img,
.vf-action-profile video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.vf-btn {
  width: 54px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 3px;

  padding:
    4px 0;

  border: 0;

  color:
    rgba(255,255,255,.78);

  background:
    transparent;

  cursor: pointer;

  transition:
    color .2s var(--ease),
    transform .2s var(--ease);
}


.vf-btn:hover {
  color:
    #fff;

  transform:
    translateY(-2px);
}


.vf-btn:active {
  transform:
    scale(.88);
}


.vf-action-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);

  font-size:
    21px;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}


.vf-btn:hover .vf-action-icon {
  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.11);
}


.vf-btn > span:last-child {
  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .1px;

  color:
    rgba(255,255,255,.55);
}


.vf-btn.liked {
  color:
    var(--red);
}


.vf-btn.liked .vf-action-icon {
  color:
    var(--red);

  background:
    var(--red-soft);

  border-color:
    rgba(255,78,104,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 20px rgba(255,78,104,.08);
}


.vf-btn.liked > span:last-child {
  color:
    rgba(255,150,164,.8);
}


.vf-btn.shared {
  color:
    var(--green);
}


.vf-btn.shared .vf-action-icon {
  color:
    var(--green);

  background:
    var(--green-soft);

  border-color:
    rgba(114,242,139,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 20px rgba(114,242,139,.07);
}


.vf-btn.shared > span:last-child {
  color:
    rgba(151,247,169,.75);
}


.vf-delete-btn {
  color:
    rgba(255,130,140,.72);
}


.vf-delete-btn:hover {
  color:
    var(--red);
}


.vf-delete-btn .vf-action-icon {
  background:
    rgba(255,78,104,.045);

  border-color:
    rgba(255,78,104,.08);
}


/* ============================================================
   12 — TAP AREA
   ============================================================ */

.vf-tap-area {
  position: absolute;

  inset: 0;

  z-index: 6;

  cursor:
    pointer;
}


/* ============================================================
   13 — PLAY ICON
   ============================================================ */

.vf-play-icon {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  transform:
    translate(-50%, -50%)
    scale(.65);

  z-index: 20;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:
    50%;

  color:
    #fff;

  background:
    rgba(17,20,18,.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 20px 55px rgba(0,0,0,.4);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  font-size:
    30px;

  pointer-events:
    none;

  opacity:
    0;

  transition:
    transform .18s var(--ease),
    opacity .25s ease;
}


.vf-play-icon.show {
  transform:
    translate(-50%, -50%)
    scale(1);

  opacity:
    1;
}


/* ============================================================
   14 — DOUBLE TAP HEART
   ============================================================ */

.vf-heart-anim {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 110px;
  height: 110px;

  display: grid;
  place-items: center;

  transform:
    translate(-50%, -50%)
    scale(.3);

  z-index: 30;

  color:
    var(--red);

  font-size:
    74px;

  pointer-events:
    none;

  opacity:
    0;

  filter:
    drop-shadow(
      0 10px 30px
      rgba(255,78,104,.38)
    );

  transition:
    transform .12s var(--ease),
    opacity .25s ease;
}


.vf-heart-anim.pop {
  transform:
    translate(-50%, -50%)
    scale(1.15);

  opacity:
    1;
}


.vf-heart-anim.fade {
  transform:
    translate(-50%, -68%)
    scale(1);

  opacity:
    0;

  transition:
    transform .4s ease-out,
    opacity .4s ease-out;
}


/* ============================================================
   15 — PROGRESS
   ============================================================ */

.vf-progress {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 4px;

  z-index: 25;

  overflow: hidden;

  background:
    rgba(255,255,255,.10);
}


.vf-progress-bar {
  width: 0%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #48dc67,
      #9affaa
    );

  box-shadow:
    0 0 14px
    rgba(114,242,139,.35);

  transition:
    width .08s linear;
}


/* ============================================================
   16 — BACKDROP
   ============================================================ */

.vf-backdrop {
  position: fixed;

  inset: 0;

  z-index: 190;

  background:
    rgba(0,0,0,.64);

  backdrop-filter:
    blur(10px)
    saturate(110%);

  -webkit-backdrop-filter:
    blur(10px)
    saturate(110%);

  animation:
    backdrop-in .25s ease both;
}


@keyframes backdrop-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


.hidden {
  display:
    none !important;
}


/* ============================================================
   17 — COMMENTS PANEL
   ============================================================ */

.vf-comments-panel {
  position: fixed;

  left: 50%;
  bottom: 0;

  width:
    min(620px, 100%);

  height:
    min(720px, 82dvh);

  z-index: 200;

  display: flex;
  flex-direction: column;

  transform:
    translate(-50%, 105%);

  border:
    1px solid var(--border);

  border-bottom: 0;

  border-radius:
    30px 30px 0 0;

  background:
    linear-gradient(
      145deg,
      rgba(27,31,28,.94),
      rgba(10,12,11,.96)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 -30px 100px rgba(0,0,0,.45);

  backdrop-filter:
    blur(28px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(125%);

  transition:
    transform .45s var(--ease);
}


.vf-comments-panel.open {
  transform:
    translate(-50%, 0);
}


.vf-comments-handle {
  width: 42px;
  height: 4px;

  flex-shrink: 0;

  margin:
    11px auto 3px;

  border-radius:
    var(--pill);

  background:
    rgba(255,255,255,.16);
}


.vf-comments-header {
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    8px 18px;

  border-bottom:
    1px solid rgba(255,255,255,.055);

  flex-shrink: 0;
}


.vf-panel-title {
  display: flex;
  align-items: center;

  gap: 10px;
}


.vf-panel-title-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius:
    11px;

  color:
    var(--green);

  background:
    var(--green-soft);

  font-size:
    16px;
}


.vf-comments-header strong {
  font-size:
    14px;

  font-weight:
    760;
}


.vf-panel-close {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius:
    12px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size:
    17px;

  cursor:
    pointer;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.vf-panel-close:hover {
  color:
    var(--text);

  background:
    rgba(255,255,255,.075);

  transform:
    scale(1.04);
}


/* ============================================================
   18 — COMMENTS LIST
   ============================================================ */

.vf-comments-list {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding:
    17px 18px;

  display: flex;
  flex-direction: column;

  gap: 17px;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255,255,255,.12)
    transparent;
}


.vf-comments-list::-webkit-scrollbar {
  width: 5px;
}


.vf-comments-list::-webkit-scrollbar-thumb {
  border-radius:
    var(--pill);

  background:
    rgba(255,255,255,.12);
}


.vf-comment-item {
  display: flex;

  gap: 11px;

  align-items: flex-start;

  animation:
    comment-in .3s var(--ease) both;
}


@keyframes comment-in {

  from {
    opacity: 0;
    transform:
      translateY(6px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}


.vf-comment-avatar-small {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    50%;

  background:
    #111512;
}


.vf-comment-avatar-small img,
.vf-comment-avatar-small video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.vf-comment-body {
  min-width: 0;

  flex: 1;

  padding:
    10px 12px;

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.025);
}


.vf-comment-author {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-bottom: 5px;
}


.vf-comment-author strong {
  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    760;
}


.vf-comment-author small {
  color:
    var(--text-3);

  font-size:
    10px;
}


.vf-comment-texto {
  margin: 0;

  color:
    rgba(255,255,255,.82);

  font-size:
    12px;

  line-height:
    1.55;

  word-break:
    break-word;
}


.vf-comment-like {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  margin-top: 7px;

  padding: 2px 0;

  border: 0;

  color:
    var(--text-3);

  background:
    transparent;

  font-size:
    10px;

  cursor:
    pointer;

  transition:
    color .2s ease;
}


.vf-comment-like:hover,
.vf-comment-like.liked {
  color:
    var(--red);
}


.vf-comments-loading {
  min-height: 220px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color:
    var(--text-3);

  font-size:
    11px;
}


.vf-comments-loading i {
  color:
    var(--green);

  font-size:
    22px;
}


.vf-comment-empty {
  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 6px;

  color:
    var(--text-3);

  text-align:
    center;
}


.vf-comment-empty-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin-bottom: 8px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    19px;

  color:
    var(--green);

  background:
    var(--green-soft);

  font-size:
    23px;
}


.vf-comment-empty strong {
  color:
    var(--text-2);

  font-size:
    13px;
}


.vf-comment-empty span {
  color:
    var(--text-3);

  font-size:
    11px;
}


/* ============================================================
   19 — COMMENT INPUT
   ============================================================ */

.vf-comment-input-wrap {
  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    11px 16px;

  padding-bottom:
    max(
      11px,
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid rgba(255,255,255,.055);

  background:
    rgba(10,12,11,.35);

  flex-shrink: 0;
}


.vf-comment-avatar {
  width: 34px;
  height: 34px;

  overflow: hidden;

  flex-shrink: 0;

  border-radius:
    50%;

  border:
    1px solid rgba(255,255,255,.10);
}


.vf-comment-avatar img,
.vf-comment-avatar video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.vf-comment-input {
  min-width: 0;

  flex: 1;

  height: 40px;

  padding:
    0 15px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    var(--pill);

  outline: none;

  color:
    var(--text);

  background:
    rgba(255,255,255,.045);

  font-size:
    12px;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.vf-comment-input::placeholder {
  color:
    var(--text-3);
}


.vf-comment-input:focus {
  border-color:
    rgba(114,242,139,.28);

  background:
    rgba(255,255,255,.06);

  box-shadow:
    0 0 0 3px
    rgba(114,242,139,.045);
}


.vf-comment-submit {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: 0;

  border-radius:
    50%;

  color:
    #061008;

  background:
    linear-gradient(
      145deg,
      #a0ffad,
      #48dc67
    );

  box-shadow:
    0 8px 20px
    rgba(71,225,101,.13),
    inset 0 1px 1px
    rgba(255,255,255,.6);

  font-size:
    15px;

  cursor:
    pointer;

  transition:
    transform .2s var(--ease),
    box-shadow .2s ease;
}


.vf-comment-submit:hover {
  transform:
    translateY(-1px)
    scale(1.03);

  box-shadow:
    0 11px 24px
    rgba(71,225,101,.20);
}


.vf-comment-submit:active {
  transform:
    scale(.94);
}


/* ============================================================
   20 — SHARE SHEET
   ============================================================ */

.vf-share-sheet {
  position: fixed;

  left: 50%;
  bottom: 0;

  width:
    min(620px, 100%);

  z-index: 200;

  padding:
    11px 18px
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  border:
    1px solid var(--border);

  border-bottom:
    0;

  border-radius:
    30px 30px 0 0;

  background:
    linear-gradient(
      145deg,
      rgba(27,31,28,.95),
      rgba(10,12,11,.97)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 -30px 100px rgba(0,0,0,.45);

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);

  transform:
    translate(-50%, 105%);

  transition:
    transform .45s var(--ease);
}


.vf-share-sheet.open {
  transform:
    translate(-50%, 0);
}


.vf-sheet-handle {
  width: 42px;
  height: 4px;

  margin:
    0 auto 18px;

  border-radius:
    var(--pill);

  background:
    rgba(255,255,255,.16);
}


.vf-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom:
    15px;
}


.vf-sheet-eyebrow {
  display: block;

  margin-bottom: 4px;

  color:
    var(--text-3);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1.15px;
}


.vf-share-header h3 {
  margin: 0;

  color:
    var(--text);

  font-size:
    17px;

  letter-spacing:
    -.4px;
}


.vf-share-header-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    13px;

  color:
    var(--green);

  background:
    var(--green-soft);

  font-size:
    18px;
}


.vf-share-options {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.vf-share-opt {
  width: 100%;

  min-height: 62px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    8px 10px;

  border:
    1px solid rgba(255,255,255,.045);

  border-radius:
    16px;

  color:
    var(--text);

  background:
    rgba(255,255,255,.025);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s var(--ease);
}


.vf-share-opt:hover {
  border-color:
    rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.055);

  transform:
    translateX(2px);
}


.vf-share-opt-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius:
    12px;

  color:
    var(--green);

  background:
    var(--green-soft);

  font-size:
    17px;
}


.vf-share-opt div {
  min-width: 0;

  flex: 1;
}


.vf-share-opt strong {
  display: block;

  color:
    var(--text);

  font-size:
    12px;
}


.vf-share-opt small {
  display: block;

  margin-top: 3px;

  color:
    var(--text-3);

  font-size:
    10px;
}


.vf-share-arrow {
  color:
    var(--text-3);

  font-size:
    17px;
}


.vf-share-cancel {
  width: 100%;

  height: 46px;

  margin-top:
    9px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius:
    14px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    color .2s ease,
    background .2s ease;
}


.vf-share-cancel:hover {
  color:
    var(--text);

  background:
    rgba(255,255,255,.07);
}


/* ============================================================
   21 — UPLOAD MODAL
   ============================================================ */

.vf-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 300;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    20px;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(16px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(115%);

  animation:
    backdrop-in .25s ease both;
}


.vf-modal-box {
  position: relative;

  width:
    min(580px, 100%);

  max-height:
    min(850px, 92dvh);

  overflow-y:
    auto;

  padding:
    23px;

  border:
    1px solid var(--border);

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(28,32,29,.94),
      rgba(10,12,11,.96)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 35px 100px rgba(0,0,0,.55);

  backdrop-filter:
    blur(30px);

  -webkit-backdrop-filter:
    blur(30px);

  scrollbar-width:
    none;

  animation:
    modal-in .4s var(--ease) both;
}


.vf-modal-box::-webkit-scrollbar {
  display: none;
}


@keyframes modal-in {

  from {
    opacity: 0;
    transform:
      translateY(15px)
      scale(.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

}


.vf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom:
    19px;
}


.vf-modal-eyebrow {
  display: block;

  margin-bottom:
    5px;

  color:
    var(--text-3);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    1.2px;
}


.vf-modal-header h3 {
  margin: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  color:
    var(--text);

  font-size:
    20px;

  letter-spacing:
    -.7px;
}


.vf-modal-title-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius:
    11px;

  color:
    var(--green);

  background:
    var(--green-soft);

  font-size:
    17px;
}


.vf-modal-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius:
    13px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size:
    18px;

  cursor:
    pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.vf-modal-close:hover {
  color:
    var(--text);

  background:
    rgba(255,255,255,.075);

  transform:
    scale(1.04);
}


/* ============================================================
   22 — UPLOAD AREA
   ============================================================ */

.vf-upload-area {
  min-height:
    230px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    35px 22px;

  border:
    1px dashed rgba(255,255,255,.14);

  border-radius:
    21px;

  text-align:
    center;

  background:
    linear-gradient(
      145deg,
      rgba(114,242,139,.045),
      rgba(255,255,255,.018)
    );

  cursor:
    pointer;

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s var(--ease);
}


.vf-upload-area:hover {
  border-color:
    rgba(114,242,139,.36);

  background:
    linear-gradient(
      145deg,
      rgba(114,242,139,.075),
      rgba(255,255,255,.025)
    );

  transform:
    translateY(-1px);
}


.vf-upload-icon {
  width: 68px;
  height: 68px;

  display: grid;
  place-items: center;

  margin-bottom:
    14px;

  border:
    1px solid rgba(114,242,139,.12);

  border-radius:
    22px;

  color:
    var(--green);

  background:
    var(--green-soft);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 18px 45px rgba(0,0,0,.18);

  font-size:
    29px;
}


.vf-upload-area strong {
  color:
    var(--text);

  font-size:
    14px;
}


.vf-upload-area p {
  max-width:
    320px;

  margin:
    7px 0;

  color:
    var(--text-2);

  font-size:
    11px;

  line-height:
    1.5;
}


.vf-upload-area small {
  color:
    var(--text-3);

  font-size:
    9px;

  font-weight:
    650;
}


/* ============================================================
   23 — VIDEO PREVIEW
   ============================================================ */

.vf-preview-wrap {
  width: 100%;
}


.vf-video-preview {
  width: 100%;

  max-height:
    330px;

  display: block;

  margin-bottom:
    16px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    18px;

  background:
    #000;

  object-fit:
    contain;

  box-shadow:
    0 20px 50px rgba(0,0,0,.28);
}


/* ============================================================
   24 — FORM
   ============================================================ */

.vf-form-group {
  margin-bottom:
    16px;
}


.vf-form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom:
    7px;
}


.vf-form-label label {
  display: flex;
  align-items: center;

  gap: 6px;

  color:
    var(--text-2);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .8px;
}


.vf-form-label label i {
  color:
    var(--green);

  font-size:
    13px;
}


.vf-form-label > span {
  color:
    var(--text-3);

  font-size:
    9px;
}


.vf-form-group textarea {
  width: 100%;

  min-height:
    95px;

  display: block;

  padding:
    12px 14px;

  resize:
    vertical;

  outline:
    none;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    16px;

  color:
    var(--text);

  background:
    rgba(255,255,255,.035);

  font-size:
    12px;

  line-height:
    1.55;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.vf-form-group textarea::placeholder {
  color:
    var(--text-3);
}


.vf-form-group textarea:focus {
  border-color:
    rgba(114,242,139,.27);

  background:
    rgba(255,255,255,.05);

  box-shadow:
    0 0 0 3px
    rgba(114,242,139,.04);
}


/* ============================================================
   25 — UPLOAD PROGRESS
   ============================================================ */

.vf-upload-progress {
  margin-bottom:
    16px;

  padding:
    12px 13px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.025);
}


.vf-progress-track {
  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius:
    var(--pill);

  background:
    rgba(255,255,255,.07);
}


.vf-progress-fill {
  width: 0%;
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #48dc67,
      #9affaa
    );

  box-shadow:
    0 0 16px
    rgba(114,242,139,.3);

  transition:
    width .3s ease;
}


.vf-progress-info {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  margin-top:
    7px;

  color:
    var(--text-3);

  font-size:
    9px;
}


.vf-progress-info strong {
  color:
    var(--green);

  font-weight:
    750;
}


/* ============================================================
   26 — AUTH / PUBLISH BUTTON
   ============================================================ */

.vf-btn-auth {
  width: 100%;

  min-height:
    48px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    0;

  border-radius:
    15px;

  color:
    #061008;

  background:
    linear-gradient(
      135deg,
      #9affaa,
      #48dc67
    );

  box-shadow:
    0 12px 30px
    rgba(70,220,100,.14),
    inset 0 1px 1px
    rgba(255,255,255,.65);

  font-size:
    12px;

  font-weight:
    850;

  cursor:
    pointer;

  transition:
    transform .2s var(--ease),
    box-shadow .2s ease,
    opacity .2s ease;
}


.vf-btn-auth:hover:not(:disabled) {
  transform:
    translateY(-2px);

  box-shadow:
    0 17px 35px
    rgba(70,220,100,.21),
    inset 0 1px 1px
    rgba(255,255,255,.7);
}


.vf-btn-auth:active:not(:disabled) {
  transform:
    scale(.985);
}


.vf-btn-auth:disabled {
  opacity:
    .42;

  cursor:
    not-allowed;

  box-shadow:
    none;
}


/* ============================================================
   27 — LOADING
   ============================================================ */

.vf-loading {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color:
    var(--text-2);

  background:
    radial-gradient(
      circle at center,
      rgba(114,242,139,.035),
      transparent 35%
    ),
    #050606;

  z-index:
    50;
}


.vf-loading-icon {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  margin-bottom:
    5px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    20px;

  color:
    var(--green);

  background:
    var(--green-soft);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 18px 45px rgba(0,0,0,.25);

  font-size:
    23px;
}


.vf-loading strong {
  color:
    var(--text);

  font-size:
    13px;
}


.vf-loading > span {
  color:
    var(--text-3);

  font-size:
    10px;
}


/* ============================================================
   28 — EMPTY
   ============================================================ */

.vf-empty {
  width: 100%;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    30px;

  text-align:
    center;

  background:
    radial-gradient(
      circle at center,
      rgba(114,242,139,.04),
      transparent 38%
    );
}


.vf-empty-icon {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  margin-bottom:
    9px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    25px;

  color:
    var(--green);

  background:
    linear-gradient(
      145deg,
      rgba(114,242,139,.09),
      rgba(255,255,255,.035)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 55px rgba(0,0,0,.3);

  font-size:
    30px;
}


.vf-error-icon {
  color:
    var(--red);

  background:
    var(--red-soft);
}


.vf-empty h2 {
  margin:
    0;

  color:
    var(--text);

  font-size:
    18px;

  letter-spacing:
    -.5px;
}


.vf-empty p {
  max-width:
    300px;

  margin:
    2px 0 10px;

  color:
    var(--text-3);

  font-size:
    11px;

  line-height:
    1.55;
}


.vf-empty-button {
  min-height:
    43px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    0 17px;

  border:
    0;

  border-radius:
    14px;

  color:
    #061008;

  background:
    linear-gradient(
      135deg,
      #9affaa,
      #48dc67
    );

  box-shadow:
    0 12px 28px
    rgba(70,220,100,.13),
    inset 0 1px 1px
    rgba(255,255,255,.65);

  font-size:
    11px;

  font-weight:
    850;

  cursor:
    pointer;

  transition:
    transform .2s var(--ease),
    box-shadow .2s ease;
}


.vf-empty-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 32px
    rgba(70,220,100,.20);
}


/* ============================================================
   29 — TOAST
   ============================================================ */

.vf-toast {
  position: fixed;

  left: 50%;
  bottom: 32px;

  z-index: 400;

  max-width:
    calc(100% - 30px);

  padding:
    10px 15px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    var(--pill);

  color:
    var(--text);

  background:
    rgba(20,23,21,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 45px rgba(0,0,0,.35);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  font-size:
    11px;

  font-weight:
    700;

  white-space:
    nowrap;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateX(-50%)
    translateY(15px);

  transition:
    opacity .3s ease,
    transform .3s var(--ease);
}


.vf-toast.show {
  opacity:
    1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* ============================================================
   30 — SPINNER
   ============================================================ */

.spin {
  display:
    inline-block;

  animation:
    spin .8s linear infinite;
}


@keyframes spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* ============================================================
   31 — DESKTOP
   ============================================================ */

@media (min-width: 900px) {

  .vf-feed {
    background:
      radial-gradient(
        circle at center,
        rgba(255,255,255,.018),
        transparent 42%
      ),
      #050606;
  }


  .vf-item {
    width:
      min(100%, 100vw);

    margin:
      0 auto;
  }


  .vf-video {
    object-fit:
      contain;
  }

}


/* ============================================================
   32 — TABLET
   ============================================================ */

@media (max-width: 760px) {

  .vf-top {
    top:
      10px;

    width:
      calc(100% - 20px);

    height:
      58px;

    border-radius:
      19px;
  }


  .vf-top-btn {
    width:
      40px;

    height:
      40px;

    border-radius:
      13px;

    font-size:
      17px;
  }


  .vf-top-title h2 {
    font-size:
      14px;
  }


  .vf-video-badge {
    top:
      83px;
  }


  .vf-overlay-bottom {
    padding:
      130px 86px 39px 17px;
  }


  .vf-actions {
    right:
      11px;

    bottom:
      70px;

    gap:
      8px;

    padding:
      7px 5px;

    border-radius:
      20px;
  }


  .vf-action-profile {
    width:
      41px;

    height:
      41px;
  }


  .vf-btn {
    width:
      48px;
  }


  .vf-action-icon {
    width:
      38px;

    height:
      38px;

    border-radius:
      13px;

    font-size:
      19px;
  }


  .vf-btn > span:last-child {
    font-size:
      8px;
  }


  .vf-desc {
    max-width:
      calc(100vw - 115px);

    font-size:
      12px;
  }


  .vf-vistas {
    font-size:
      9px;
  }


  .vf-comments-panel,
  .vf-share-sheet {
    width:
      100%;

    border-radius:
      27px 27px 0 0;
  }


  .vf-modal-overlay {
    align-items:
      flex-end;

    padding:
      0;
  }


  .vf-modal-box {
    width:
      100%;

    max-height:
      94dvh;

    padding:
      20px 16px
      max(
        18px,
        env(safe-area-inset-bottom)
      );

    border-radius:
      28px 28px 0 0;
  }


  .vf-upload-area {
    min-height:
      205px;
  }


  .vf-toast {
    bottom:
      calc(
        20px +
        env(safe-area-inset-bottom)
      );
  }

}


/* ============================================================
   33 — SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

  .vf-top {
    width:
      calc(100% - 16px);

    top:
      8px;
  }


  .vf-top-eyebrow {
    display:
      none;
  }


  .vf-top-title h2 {
    font-size:
      13px;
  }


  .vf-video-badge {
    display:
      none;
  }


  .vf-overlay-bottom {
    padding:
      110px 76px 31px 13px;
  }


  .vf-user-row {
    gap:
      8px;

    margin-bottom:
      8px;
  }


  .vf-avatar-btn {
    width:
      38px;

    height:
      38px;
  }


  .vf-autor-nombre {
    font-size:
      12px;
  }


  .vf-autor-handle {
    font-size:
      9px;
  }


  .vf-desc {
    max-width:
      calc(100vw - 95px);

    font-size:
      11px;

    -webkit-line-clamp:
      2;
  }


  .vf-vistas {
    margin-top:
      6px;

    font-size:
      8px;
  }


  .vf-actions {
    right:
      7px;

    bottom:
      58px;

    gap:
      5px;

    padding:
      5px 3px;
  }


  .vf-action-profile {
    width:
      37px;

    height:
      37px;
  }


  .vf-btn {
    width:
      43px;
  }


  .vf-action-icon {
    width:
      34px;

    height:
      34px;

    border-radius:
      11px;

    font-size:
      17px;
  }


  .vf-btn > span:last-child {
    font-size:
      7px;
  }


  .vf-heart-anim {
    width:
      90px;

    height:
      90px;

    font-size:
      62px;
  }


  .vf-play-icon {
    width:
      65px;

    height:
      65px;

    font-size:
      26px;
  }


  .vf-comments-header {
    padding:
      7px 14px;
  }


  .vf-comments-list {
    padding:
      14px;
  }


  .vf-comment-input-wrap {
    padding-left:
      11px;

    padding-right:
      11px;
  }


  .vf-share-sheet {
    padding-left:
      13px;

    padding-right:
      13px;
  }

}


/* ============================================================
   34 — LANDSCAPE MOBILE
   ============================================================ */

@media (
  max-height: 520px
) and (
  orientation: landscape
) {

  .vf-top {
    top:
      7px;

    height:
      50px;
  }


  .vf-top-btn {
    width:
      36px;

    height:
      36px;
  }


  .vf-video-badge {
    display:
      none;
  }


  .vf-overlay-bottom {
    padding:
      80px 90px 22px 16px;
  }


  .vf-actions {
    bottom:
      43px;

    right:
      12px;

    flex-direction:
      row;

    border-radius:
      18px;

    gap:
      4px;
  }


  .vf-action-profile {
    width:
      35px;

    height:
      35px;
  }


  .vf-btn {
    width:
      42px;
  }


  .vf-action-icon {
    width:
      33px;

    height:
      33px;
  }

}


/* ============================================================
   35 — REDUCED MOTION
   ============================================================ */

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

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}