:root{
  --navy:#323B60;
  --blue:#98B3C8;
  --pink:#F4CECE;
  --cream:#FFF9F6;
  --ink:#25304e;
  --muted:#7e8799;
  --white:#fff;
  --gold:#c99a63;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f0f4;color:var(--ink)}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
#app{min-height:100dvh}
.screen-container{min-height:100dvh}
.app-screen{min-height:100dvh;position:relative;overflow:hidden;padding:22px 18px 112px;background:linear-gradient(180deg,#fffdfa 0%,#fff8f5 100%)}
.hidden{display:none!important}

/* splash */
.splash-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fffaf7}
.splash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.splash-overlay{position:relative;z-index:2;width:100%;height:100dvh;background:linear-gradient(180deg,rgba(255,255,255,0) 58%,rgba(255,250,247,.04) 100%)}
.splash-loader-block{position:absolute;top:62%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:max-content;max-width:90vw}
.loader-ring{width:42px;height:42px;border-radius:50%;border:3px solid rgba(152,179,200,.35);border-top-color:var(--navy);animation:spin 1s linear infinite;margin-bottom:12px}
.splash-loading{font-size:14px;letter-spacing:.18em;color:#667a94}
@keyframes spin{to{transform:rotate(360deg)}}

/* shared decorative */
.floral{position:absolute;pointer-events:none;z-index:1;user-select:none}
.floral-top-left{top:-28px;left:-32px;width:155px;max-width:40vw}
.floral-top-right{top:-24px;right:-28px;width:150px;max-width:40vw}
.floral-bottom-left{left:-32px;bottom:-28px;width:165px;max-width:42vw}
.floral-bottom-right{right:-35px;bottom:-30px;width:168px;max-width:44vw}

/* home */
.home-screen{padding-bottom:156px;background:radial-gradient(circle at 18% 8%,rgba(244,206,206,.22),transparent 26%),radial-gradient(circle at 90% 90%,rgba(152,179,200,.16),transparent 30%),linear-gradient(180deg,#fffdfa 0%,#fff8f5 100%)}
.home-card{position:relative;z-index:2;margin:58px auto 12px;max-width:520px;padding:38px 24px 34px;text-align:center;background:rgba(255,255,255,.76);border:1px solid rgba(50,59,96,.08);border-radius:34px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 55px rgba(50,59,96,.08),0 5px 16px rgba(50,59,96,.04)}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#8291ac;margin:0 0 16px}
.monogram-wrap{width:150px;height:150px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,rgba(244,206,206,.23),rgba(255,255,255,0) 70%);position:relative}
.monogram-wrap::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(201,154,99,.34)}
.monogram{font-family:Georgia,"Times New Roman",serif;font-size:62px;line-height:1;color:var(--navy);position:relative;z-index:2}
.monogram .amp{font-size:.62em;color:var(--gold)}
.display-title{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(36px,10vw,50px);margin:4px 0 10px;color:#26365d}
.lead{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;color:#667089;margin:0 auto 24px;max-width:380px}
.btn{width:100%;border:0;border-radius:22px;padding:17px 18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s ease}
.btn:active{transform:scale(.985)}
.btn-primary{background:linear-gradient(135deg,#323B60,#42537D);color:white;box-shadow:0 12px 26px rgba(50,59,96,.20)}
.btn-secondary{background:rgba(255,255,255,.80);color:var(--navy);border:1px solid rgba(50,59,96,.15);box-shadow:0 6px 18px rgba(50,59,96,.05);margin-top:12px}
.btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-thanks{margin:28px 0 26px;font-family:Georgia,"Times New Roman",serif;font-style:italic;color:#8f725f}
.home-divider{display:flex;align-items:center;gap:10px;justify-content:center;margin:22px auto 0;max-width:220px;color:var(--pink)}
.home-divider::before,.home-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--blue),transparent)}

/* headers */
.topbar{position:relative;z-index:3;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;max-width:520px;margin:0 auto 16px}
.icon-btn{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 5px 16px rgba(50,59,96,.07);display:grid;place-items:center;color:var(--navy)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-label{text-align:center;font-size:10px;letter-spacing:.2em;color:#8a96a9;text-transform:uppercase}
.screen-title{font-family:Georgia,"Times New Roman",serif;text-align:center;font-size:31px;font-weight:400;margin:2px 0 6px;color:#26365d}
.screen-subtitle{text-align:center;color:#7a8497;line-height:1.5;margin:0 auto 22px;max-width:390px}
.content-wrap{position:relative;z-index:2;max-width:520px;margin:0 auto}

/* event cards */
.event-list{display:grid;gap:16px}
.event-card{padding:0;border:0;border-radius:28px;background:white;overflow:hidden;text-align:left;box-shadow:0 14px 30px rgba(50,59,96,.08);border:1px solid rgba(50,59,96,.06)}
.event-card:active{transform:scale(.99)}
.event-cover{width:100%;height:180px;object-fit:cover;display:block;background:linear-gradient(135deg,#f5d5da,#cad6e2)}
.event-body{padding:18px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(244,206,206,.55);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.event-title{font-family:Georgia,"Times New Roman",serif;font-size:24px;margin:8px 0 6px;color:#26365d}
.event-copy{margin:0;color:#737f94;line-height:1.5}

/* upload */
.form-card{background:rgba(255,255,255,.82);border:1px solid rgba(50,59,96,.07);border-radius:28px;padding:20px;box-shadow:0 15px 36px rgba(50,59,96,.07)}
.field-label{display:block;font-weight:700;color:#344466;margin-bottom:8px}
.text-input{width:100%;border:1px solid rgba(50,59,96,.14);background:white;border-radius:16px;padding:14px 15px;outline:none;color:var(--ink)}
.text-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(152,179,200,.14)}
.event-choice{display:grid;gap:10px;margin:10px 0 18px}
.choice{border:1px solid rgba(50,59,96,.10);background:white;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.choice.active{border-color:rgba(244,206,206,.95);background:rgba(244,206,206,.38)}
.choice-title{font-family:Georgia,"Times New Roman",serif;font-size:18px;color:#26365d}
.radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid #b7c1ce;position:relative;flex:0 0 auto}
.choice.active .radio-dot{border-color:var(--navy)}
.choice.active .radio-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--navy)}
.stack{display:grid;gap:12px}
.note{font-size:13px;color:#7f8898;text-align:center;margin-top:12px}

/* preview */
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preview-item{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#eef1f5}
.preview-item img,.preview-item video{width:100%;height:100%;object-fit:cover}
.preview-remove{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(25,31,47,.72);color:white}
.actions-bottom{display:grid;gap:10px;margin-top:18px}

/* quality */
.quality-list{display:grid;gap:14px}
.quality-card{border:1px solid rgba(50,59,96,.12);background:white;border-radius:20px;padding:18px;text-align:left}
.quality-card.active{border-color:#f2b8bf;background:rgba(244,206,206,.33);box-shadow:0 10px 24px rgba(244,206,206,.18)}
.quality-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.quality-title{font-family:Georgia,"Times New Roman",serif;font-size:21px;color:#26365d;margin:0}
.pill{display:inline-block;margin-top:6px;border-radius:999px;padding:5px 9px;background:#cfe0eb;color:#324a64;font-size:10px;font-weight:800;letter-spacing:.08em}
.quality-card p{color:#7b8497;line-height:1.5;margin:8px 0 0}

/* progress / done */
.progress-list{display:grid;gap:12px}
.progress-row{background:white;border-radius:18px;padding:12px;display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;border:1px solid rgba(50,59,96,.07)}
.progress-thumb{width:58px;height:58px;border-radius:12px;object-fit:cover;background:#eef1f5}
.progress-meta{font-size:13px;color:#6e788a}
.bar{height:7px;background:#ece8e5;border-radius:999px;overflow:hidden;margin-top:8px}
.bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--navy));transition:width .25s}
.done-card{text-align:center;background:rgba(255,255,255,.86);border-radius:30px;padding:34px 24px;box-shadow:0 18px 46px rgba(50,59,96,.08)}
.done-check{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#64765b;color:white;margin:0 auto 18px}
.done-check svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* albums */
.album-grid{display:grid;gap:16px}
.album-card{background:white;border-radius:26px;overflow:hidden;box-shadow:0 14px 30px rgba(50,59,96,.08);border:1px solid rgba(50,59,96,.06)}
.album-card img{width:100%;height:170px;object-fit:cover;display:block}
.album-card button{width:100%;border:0;background:white;text-align:left;padding:16px 18px}
.album-count{font-size:13px;color:#7b8497}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery-item{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#eef1f5;border:0;padding:0}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover}
.empty{text-align:center;color:#8b94a4;padding:34px 12px}

/* bottom nav */
.bottom-nav{position:fixed;left:18px;right:18px;bottom:calc(14px + env(safe-area-inset-bottom));height:72px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(50,59,96,.08);border-radius:24px;box-shadow:0 14px 40px rgba(50,59,96,.16);z-index:9999;max-width:520px;margin:0 auto}
.nav-item{border:0;background:transparent;color:#7d8796;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;min-width:0}
.nav-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item.active{color:var(--navy);font-weight:800}
.nav-upload{position:relative;padding-top:18px}
.nav-upload-button{position:absolute;top:-26px;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8b9c4,#f4cece);color:#fff;border:4px solid rgba(255,255,255,.95);box-shadow:0 9px 24px rgba(50,59,96,.22)}
.nav-icon-camera{width:25px;height:25px}

@media (min-width:700px){
  .app-screen{padding-left:24px;padding-right:24px}
  .home-card{margin-top:72px}
}


/* =========================================================
   RESPONSIVE GENERAL
========================================================= */

@media (min-width:700px){
  .app-screen{
    padding-left:24px;
    padding-right:24px;
  }

  .home-card{
    margin-top:72px;
  }
}

@media(max-width:420px){
  .splash-loader-block{
    top:60%;
  }

  .home-card{
    margin-top:44px;
    padding-bottom:28px;
  }

  .home-thanks{
    margin-bottom:34px;
  }
}


/* =========================================================
   NAVEGACIÓN INFERIOR
========================================================= */

.bottom-nav{
  grid-template-columns:1fr 1fr 1fr;
}

.nav-camera{
  position:relative;
  padding-top:18px;
}

.nav-camera-button{
  position:absolute;
  top:-28px;

  width:62px;
  height:62px;

  border-radius:50%;

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

  background:
    linear-gradient(
      135deg,
      #f7b8c4,
      #F4CECE
    );

  color:#fff;

  border:
    5px solid
    rgba(255,255,255,.97);

  box-shadow:
    0 10px 26px
    rgba(50,59,96,.22);

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.nav-camera:active
.nav-camera-button{
  transform:scale(.94);

  box-shadow:
    0 6px 18px
    rgba(50,59,96,.18);
}

.nav-camera
.nav-icon-camera{
  width:27px;
  height:27px;
}

/* neutraliza clases antiguas */

.nav-upload{
  padding-top:0;
}

.nav-upload-button{
  display:none;
}


/* =========================================================
   PREVIEW
========================================================= */

.preview-actions{
  position:absolute;

  right:7px;
  top:7px;

  display:flex;
  gap:6px;

  z-index:3;
}

.preview-tool{
  width:30px;
  height:30px;

  border:0;
  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    rgba(25,31,47,.76);

  color:white;

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

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.12);
}

.preview-tool svg{
  width:15px;
  height:15px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.preview-remove{
  position:static;

  width:30px;
  height:30px;

  background:
    rgba(25,31,47,.76);
}


/* =========================================================
   SHEET SELECCIÓN DE EVENTO
========================================================= */

.sheet-backdrop{
  position:fixed;
  inset:0;

  z-index:15000;

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

  background:
    rgba(28,34,52,.38);

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

  padding:
    18px 14px
    calc(
      14px +
      env(safe-area-inset-bottom)
    );
}

.event-sheet{
  width:min(100%,520px);

  background:#fffdfa;

  border-radius:30px;

  padding:
    10px 18px 18px;

  box-shadow:
    0 -14px 50px
    rgba(34,42,67,.22);

  animation:
    sheetIn .24s ease-out;
}

@keyframes sheetIn{

  from{
    transform:
      translateY(30px);

    opacity:0;
  }

  to{
    transform:
      translateY(0);

    opacity:1;
  }
}

.event-sheet .sheet-handle{
  width:44px;
  height:5px;

  border-radius:999px;

  background:#d9dde5;

  margin:
    3px auto 15px;
}

.sheet-photo-preview{
  width:76px;
  height:76px;

  border-radius:18px;

  overflow:hidden;

  margin:
    0 auto 14px;

  background:#edf1f5;

  box-shadow:
    0 8px 20px
    rgba(50,59,96,.10);
}

.sheet-photo-preview img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;
}

.event-sheet h2{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:25px;
  font-weight:400;

  text-align:center;

  color:#26365d;

  margin:
    0 0 7px;
}

.event-sheet > p{
  text-align:center;

  color:#7a8497;

  margin:
    0 0 16px;

  font-size:14px;
}

.sheet-options{
  display:grid;

  gap:10px;
}

.sheet-event-option{
  border:
    1px solid
    rgba(50,59,96,.10);

  background:white;

  border-radius:18px;

  padding:
    14px 13px;

  display:grid;

  grid-template-columns:
    38px 1fr 20px;

  align-items:center;

  text-align:left;

  color:#26365d;

  gap:9px;
}

.sheet-event-option:active{
  transform:scale(.99);

  background:
    rgba(244,206,206,.22);
}

.sheet-option-icon{
  width:36px;
  height:36px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    rgba(244,206,206,.36);

  font-size:20px;

  color:var(--navy);
}

.sheet-event-option strong{
  display:block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:17px;
  font-weight:400;
}

.sheet-event-option small{
  display:block;

  color:#8a93a3;

  font-size:12px;

  margin-top:3px;
}

.sheet-chevron{
  font-size:27px;

  color:#99a3b2;
}

.sheet-cancel{
  width:100%;

  border:0;

  background:transparent;

  color:#7d8796;

  padding:
    14px 10px 5px;

  margin-top:4px;

  font-weight:600;
}


/* =========================================================
   PIN
========================================================= */

.pin-screen{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:100dvh;

  padding:28px;

  position:relative;

  overflow:hidden;
}

.pin-card{
  width:100%;
  max-width:420px;

  position:relative;

  z-index:2;

  padding:
    42px 28px;

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

  border:
    1px solid
    rgba(50,59,96,.08);

  border-radius:32px;

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

  box-shadow:
    0 24px 60px
    rgba(50,59,96,.10);

  text-align:center;
}

.pin-input{
  width:100%;
  height:70px;

  margin:
    20px 0 16px;

  border:
    1px solid
    rgba(50,59,96,.14);

  border-radius:20px;

  background:#fff;

  text-align:center;

  font-size:32px;

  letter-spacing:14px;

  color:#323B60;

  outline:none;
}

.pin-input:focus{
  border-color:#98B3C8;

  box-shadow:
    0 0 0 4px
    rgba(152,179,200,.15);
}

.pin-error{
  margin-bottom:14px;

  color:#a94442;

  font-size:14px;
}

.hidden{
  display:none !important;
}


/* =========================================================
   VISOR FULLSCREEN
========================================================= */

.media-viewer{
  position:fixed;
  inset:0;

  z-index:20000;

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

  overflow:hidden;

  background:
    rgba(15,20,32,.97);

  opacity:0;

  transition:
    opacity .18s ease;

  overscroll-behavior:contain;
}

.media-viewer.visible{
  opacity:1;
}

.media-viewer.closing{
  opacity:0;
}


/* =========================================================
   FOTO VISOR
========================================================= */

.viewer-stage{
  width:100%;
  height:100%;

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

  box-sizing:border-box;

  padding:
    calc(
      76px +
      env(safe-area-inset-top)
    )
    20px
    calc(
      145px +
      env(safe-area-inset-bottom)
    );
}

.viewer-stage img{
  display:block;

  width:auto;
  height:auto;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  border-radius:16px;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.38);

  user-select:none;

  -webkit-user-drag:none;
}


/* =========================================================
   CERRAR
========================================================= */

.viewer-close{
  position:absolute;

  top:
    calc(
      16px +
      env(safe-area-inset-top)
    );

  right:16px;

  z-index:30;

  width:46px;
  height:46px;

  padding:0;

  border:0;

  border-radius:50%;

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

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

  color:#fff;

  font-size:31px;
  font-weight:300;

  line-height:1;

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

  box-shadow:
    0 6px 18px
    rgba(0,0,0,.18);
}


/* =========================================================
   FLECHAS
========================================================= */

.viewer-nav{
  position:absolute;

  top:50%;

  transform:
    translateY(-50%);

  z-index:25;

  width:46px;
  height:58px;

  border:0;

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

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

  color:#fff;

  font-size:34px;

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

.viewer-prev{
  left:8px;

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

.viewer-next{
  right:8px;

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


/* =========================================================
   CONTADOR
========================================================= */

.viewer-count{
  position:absolute;

  left:50%;

  bottom:
    calc(
      96px +
      env(safe-area-inset-bottom)
    );

  transform:
    translateX(-50%);

  z-index:25;

  padding:
    6px 12px;

  border-radius:999px;

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

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

  font-size:12px;
  font-weight:600;

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


/* =========================================================
   DOCK ACCIONES VISOR
========================================================= */

.viewer-action-dock{
  position:absolute;

  left:50%;

  bottom:
    calc(
      22px +
      env(safe-area-inset-bottom)
    );

  transform:
    translateX(-50%);

  z-index:30;

  width:
    calc(100% - 36px);

  max-width:360px;

  display:flex;
  align-items:center;

  gap:8px;

  padding:7px;

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

  border-radius:22px;

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

  box-shadow:
    0 16px 50px
    rgba(0,0,0,.34);

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


.viewer-save-action{
  position:static !important;

  flex:1;

  min-width:0;

  height:50px;

  margin:0 !important;

  padding:
    0 18px !important;

  border:0 !important;

  border-radius:
    16px !important;

  display:flex !important;

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

  gap:9px;

  background:
    #323B60 !important;

  color:
    #fff !important;

  font-size:14px;
  font-weight:700;

  transform:none !important;
}


.viewer-delete-action{
  position:static !important;

  flex:
    0 0 50px;

  width:50px;
  height:50px;

  margin:0 !important;

  padding:0 !important;

  border:0 !important;

  border-radius:
    16px !important;

  display:flex !important;

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

  background:
    #FBE8E8 !important;

  color:
    #A94343 !important;

  transform:none !important;
}


.viewer-save-action svg,
.viewer-delete-action svg{
  width:20px;
  height:20px;

  flex:0 0 20px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.viewer-delete-action:disabled{
  opacity:.45;

  cursor:default;
}


/* =========================================================
   LOADING / ERROR VISOR
========================================================= */

.viewer-loading{
  color:
    rgba(255,255,255,.82);

  font-size:14px;
}

.viewer-error{
  padding:24px;

  display:flex;
  flex-direction:column;

  gap:5px;

  text-align:center;

  color:#fff;
}

.viewer-error strong{
  font-size:16px;
}

.viewer-error span{
  opacity:.65;

  font-size:13px;
}


/* =========================================================
   SHEET ELIMINAR FOTO
========================================================= */

.app-sheet-overlay{
  position:fixed;
  inset:0;

  z-index:21000;

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

  background:
    rgba(10,14,24,.58);

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

  opacity:0;

  transition:
    opacity .24s ease;
}

.app-sheet-overlay.show{
  opacity:1;
}


.app-sheet{
  width:
    calc(100% - 18px);

  max-width:500px;

  margin-bottom:
    max(
      9px,
      env(safe-area-inset-bottom)
    );

  padding:
    10px 20px 20px;

  box-sizing:border-box;

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

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

  border-radius:30px;

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.34);

  transform:
    translateY(
      calc(100% + 30px)
    );

  transition:
    transform .30s
    cubic-bezier(.22,.8,.30,1);
}

.app-sheet-overlay.show
.app-sheet{
  transform:
    translateY(0);
}


.app-sheet .sheet-handle{
  width:38px;
  height:4px;

  margin:
    2px auto 20px;

  border-radius:999px;

  background:#D9DCE5;
}


.delete-sheet-icon{
  width:58px;
  height:58px;

  margin:
    0 auto 16px;

  border-radius:50%;

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

  background:#FCE9E9;

  color:#A94343;
}


.delete-sheet-icon svg{
  width:25px;
  height:25px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.delete-sheet-title{
  margin:0;

  text-align:center;

  font-size:21px;
  font-weight:700;

  color:#323B60;
}


.delete-sheet-copy{
  max-width:310px;

  margin:
    10px auto 0;

  text-align:center;

  color:#626A7E;

  font-size:14px;
  line-height:1.5;
}


.delete-sheet-note{
  max-width:320px;

  margin:
    5px auto 22px;

  text-align:center;

  color:#9A9FAD;

  font-size:12px;
  line-height:1.45;
}


.delete-sheet-actions{
  display:grid;

  grid-template-columns:
    1fr 1.35fr;

  gap:9px;
}


.btn-sheet-cancel,
.btn-sheet-delete{
  height:52px;

  padding:
    0 14px;

  border:0;

  border-radius:17px;

  font-size:14px;
  font-weight:700;
}


.btn-sheet-cancel{
  background:#F1F2F6;

  color:#323B60;
}


.btn-sheet-delete{
  display:flex;

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

  gap:7px;

  background:#A94343;

  color:#fff;
}


.btn-sheet-delete svg{
  width:18px;
  height:18px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.btn-sheet-delete:disabled{
  opacity:.58;

  cursor:default;
}


/* =========================================================
   TOAST
========================================================= */

.app-toast{
  position:fixed;

  left:50%;

  bottom:
    calc(
      105px +
      env(safe-area-inset-bottom)
    );

  transform:
    translate(
      -50%,
      18px
    );

  z-index:22000;

  width:max-content;

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

  padding:
    12px 18px;

  border-radius:16px;

  background:
    rgba(50,59,96,.96);

  color:#fff;

  font-size:14px;
  font-weight:600;

  text-align:center;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.22);

  opacity:0;

  pointer-events:none;

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

.app-toast.show{
  opacity:1;

  transform:
    translate(
      -50%,
      0
    );
}

/* =========================================================
   ADMIN
========================================================= */

.bottom-nav.has-admin{
  grid-template-columns:
    repeat(4,1fr);
}

.nav-admin svg{
  width:22px;
  height:22px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-screen{
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(152,179,200,.17),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 88%,
      rgba(244,206,206,.18),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fffdfa 0%,
      #fff8f5 100%
    );
}


.admin-header{
  position:relative;
  z-index:2;

  text-align:center;

  padding:
    24px 0 8px;
}


.admin-shield{
  width:58px;
  height:58px;

  margin:
    0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:
    rgba(50,59,96,.08);

  color:
    var(--navy);
}


.admin-shield svg{
  width:27px;
  height:27px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* TABS */

.admin-tabs{
  position:relative;
  z-index:3;

  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  gap:6px;

  padding:6px;

  margin:
    8px 0 22px;

  border:
    1px solid
    rgba(50,59,96,.08);

  border-radius:20px;

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

  backdrop-filter:
    blur(14px);

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

  box-shadow:
    0 10px 30px
    rgba(50,59,96,.06);
}


.admin-tab{
  min-width:0;

  min-height:58px;

  padding:
    8px 5px;

  border:0;

  border-radius:15px;

  display:flex;
  flex-direction:column;

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

  gap:4px;

  background:transparent;

  color:#8B93A3;

  font-size:11px;
  font-weight:700;

  transition:
    .18s ease;
}


.admin-tab svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-tab.active{
  background:#fff;

  color:
    var(--navy);

  box-shadow:
    0 5px 16px
    rgba(50,59,96,.10);
}


/* CONTENIDO */

.admin-content{
  position:relative;
  z-index:2;
}


.admin-section{
  animation:
    adminFade .18s ease;
}


@keyframes adminFade{

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

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


.admin-section-head{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:12px;

  margin-bottom:15px;
}


.admin-section-kicker{
  display:block;

  margin-bottom:3px;

  color:#9AA2B1;

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

  letter-spacing:.15em;

  text-transform:uppercase;
}


.admin-section-head h2{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color:#26365D;

  font-size:24px;
  font-weight:400;
}


/* EMPTY */

.admin-empty-state{
  min-height:240px;

  padding:
    34px 24px;

  display:flex;
  flex-direction:column;

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

  text-align:center;

  border:
    1px solid
    rgba(50,59,96,.07);

  border-radius:28px;

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

  box-shadow:
    0 16px 38px
    rgba(50,59,96,.06);
}


.admin-empty-icon{
  width:58px;
  height:58px;

  margin-bottom:14px;

  border-radius:18px;

  display:grid;
  place-items:center;

  background:#FBEAEA;

  color:#A94343;
}


.admin-empty-icon svg{
  width:25px;
  height:25px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-empty-state strong{
  color:#323B60;

  font-size:16px;
}


.admin-empty-state p{
  max-width:290px;

  margin:
    7px 0 0;

  color:#8A92A2;

  font-size:13px;

  line-height:1.55;
}


/* SEGURIDAD */

.admin-settings-card{
  overflow:hidden;

  border:
    1px solid
    rgba(50,59,96,.07);

  border-radius:26px;

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

  box-shadow:
    0 16px 38px
    rgba(50,59,96,.06);
}


.admin-setting{
  padding:18px;

  display:grid;

  grid-template-columns:
    44px 1fr auto;

  align-items:center;

  gap:12px;
}


.admin-setting-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    rgba(152,179,200,.18);

  color:#425676;
}


.admin-setting-icon svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-setting-info{
  min-width:0;
}


.admin-setting-info strong{
  display:block;

  color:#323B60;

  font-size:14px;
}


.admin-setting-info span{
  display:block;

  margin-top:3px;

  color:#9199A8;

  font-size:11px;
}


.admin-setting-action{
  border:0;

  padding:
    9px 12px;

  border-radius:12px;

  background:
    rgba(50,59,96,.07);

  color:#323B60;

  font-size:12px;
  font-weight:800;
}


.admin-setting-divider{
  height:1px;

  margin-left:74px;

  background:
    rgba(50,59,96,.07);
}


/* SESIÓN */

.admin-session-card{
  padding:
    34px 24px;

  text-align:center;

  border:
    1px solid
    rgba(50,59,96,.07);

  border-radius:28px;

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

  box-shadow:
    0 16px 38px
    rgba(50,59,96,.06);
}


.admin-session-icon{
  width:64px;
  height:64px;

  margin:
    0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:21px;

  background:
    rgba(50,59,96,.08);

  color:#323B60;
}


.admin-session-icon svg{
  width:29px;
  height:29px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.admin-mode-badge{
  display:inline-block;

  padding:
    6px 10px;

  margin-bottom:10px;

  border-radius:999px;

  background:
    rgba(244,206,206,.42);

  color:#6B5760;

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

  letter-spacing:.08em;

  text-transform:uppercase;
}


.admin-session-card h2{
  margin:
    0 0 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color:#26365D;

  font-size:26px;

  font-weight:400;
}


.admin-session-card p{
  max-width:310px;

  margin:
    0 auto 24px;

  color:#858E9F;

  font-size:13px;

  line-height:1.55;
}


.admin-logout-btn{
  width:100%;

  min-height:50px;

  border:
    1px solid
    rgba(169,67,67,.14);

  border-radius:17px;

  display:flex;

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

  gap:8px;

  background:#FCEEEE;

  color:#A94343;

  font-size:14px;
  font-weight:800;
}


.admin-logout-btn svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


@media(max-width:390px){

  .admin-tabs{
    gap:4px;
  }

  .admin-tab{
    font-size:10px;
  }

  .admin-setting{
    grid-template-columns:
      40px 1fr auto;

    gap:9px;

    padding:
      16px 14px;
  }

  .admin-setting-icon{
    width:40px;
    height:40px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:480px){

  .viewer-stage{
    padding-left:14px;
    padding-right:14px;
  }

  .viewer-action-dock{
    width:
      calc(100% - 28px);
  }

  .viewer-save-action{
    height:50px;

    padding:
      0 14px !important;
  }

  .viewer-delete-action{
    flex:
      0 0 50px;
  }

  .app-sheet{
    padding-left:18px;
    padding-right:18px;
  }
}

/* =========================================================
   ADMIN - ELIMINADAS
========================================================= */

.admin-counter{
  min-width:30px;
  height:30px;

  padding:0 9px;

  border-radius:999px;

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

  background:
    rgba(50,59,96,.08);

  color:#323B60;

  font-size:12px;
  font-weight:800;
}


.deleted-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}


.deleted-photo{
  position:relative;

  aspect-ratio:1/1;

  overflow:hidden;

  padding:0;

  border:0;

  border-radius:18px;

  background:#EEF1F5;

  box-shadow:
    0 8px 22px
    rgba(50,59,96,.08);
}


.deleted-photo img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  filter:
    saturate(.82);
}


.deleted-photo-badge{
  position:absolute;

  left:8px;
  bottom:8px;

  padding:
    5px 8px;

  border-radius:999px;

  background:
    rgba(20,24,35,.70);

  color:#fff;

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

  letter-spacing:.05em;

  text-transform:uppercase;

  backdrop-filter:
    blur(8px);
}


.admin-retry-btn{
  margin-top:18px;

  padding:
    10px 16px;

  border:0;

  border-radius:14px;

  background:
    rgba(50,59,96,.08);

  color:#323B60;

  font-size:12px;
  font-weight:800;
}


/* =========================================================
   SHEET ELIMINADAS
========================================================= */

.deleted-action-sheet{
  text-align:center;
}


.deleted-sheet-preview{
  width:92px;
  height:92px;

  margin:
    0 auto 16px;

  border-radius:22px;

  overflow:hidden;

  background:#EEF1F5;

  box-shadow:
    0 10px 28px
    rgba(50,59,96,.12);
}


.deleted-sheet-preview img{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;
}


.deleted-sheet-title{
  margin:
    4px 0 8px;

  text-align:center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:24px;
  font-weight:400;

  color:#26365D;
}


.deleted-sheet-copy{
  max-width:330px;

  margin:
    0 auto 20px;

  text-align:center;

  color:#858E9F;

  font-size:13px;
  line-height:1.55;
}


.deleted-sheet-actions{
  display:grid;

  gap:9px;
}


.deleted-restore-btn,
.deleted-permanent-btn,
.permanent-confirm-btn{
  width:100%;

  min-height:52px;

  padding:
    0 16px;

  border:0;

  border-radius:17px;

  display:flex;

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

  gap:8px;

  font-size:14px;
  font-weight:800;
}


.deleted-restore-btn{
  background:#323B60;

  color:#fff;
}


.deleted-permanent-btn{
  background:#FBEAEA;

  color:#A94343;
}


.deleted-restore-btn svg,
.deleted-permanent-btn svg,
.permanent-confirm-btn svg{
  width:19px;
  height:19px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.deleted-sheet-cancel{
  width:100%;

  margin-top:7px;

  padding:
    13px 10px;

  border:0;

  background:transparent;

  color:#8C94A4;

  font-size:13px;
  font-weight:700;
}


/* =========================================================
   ELIMINACIÓN DEFINITIVA
========================================================= */

.permanent-delete-sheet{
  text-align:center;
}


.permanent-warning-icon{
  width:62px;
  height:62px;

  margin:
    0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#FBE3E3;

  color:#A94343;
}


.permanent-warning-icon svg{
  width:27px;
  height:27px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.danger-kicker{
  display:block;

  margin-bottom:5px;

  color:#A94343;

  font-size:10px;
  font-weight:900;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.permanent-warning-box{
  margin:
    0 0 16px;

  padding:
    12px 14px;

  border-radius:15px;

  background:#FFF3F3;

  color:#A05A5A;

  font-size:12px;
  line-height:1.45;
}


.permanent-confirm-btn{
  background:#A94343;

  color:#fff;
}


.permanent-confirm-btn:disabled,
.deleted-restore-btn:disabled{
  opacity:.55;
}

/* =========================================================
   ADMIN - CAMBIO DE PIN
========================================================= */

.pin-change-sheet{
  text-align:center;
}


.pin-change-icon,
.confirm-pin-icon{
  width:60px;
  height:60px;

  margin:
    0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:
    rgba(50,59,96,.08);

  color:#323B60;
}


.pin-change-icon svg,
.confirm-pin-icon svg{
  width:26px;
  height:26px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.pin-change-title{
  margin:
    4px 0 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:24px;
  font-weight:400;

  color:#26365D;
}


.pin-change-copy{
  max-width:330px;

  margin:
    0 auto 22px;

  color:#858E9F;

  font-size:13px;
  line-height:1.55;
}


.pin-change-field{
  text-align:left;

  margin-bottom:13px;
}


.pin-change-field label{
  display:block;

  margin:
    0 0 7px 3px;

  color:#4B5772;

  font-size:12px;
  font-weight:800;
}


.pin-change-input{
  width:100%;
  height:58px;

  border:
    1px solid
    rgba(50,59,96,.12);

  border-radius:17px;

  background:#F9FAFC;

  outline:none;

  text-align:center;

  color:#323B60;

  font-size:26px;
  font-weight:700;

  letter-spacing:10px;
}


.pin-change-input:focus{
  border-color:#98B3C8;

  background:#fff;

  box-shadow:
    0 0 0 4px
    rgba(152,179,200,.14);
}


.pin-change-error{
  margin:
    4px 0 12px;

  padding:
    10px 12px;

  border-radius:13px;

  background:#FFF1F1;

  color:#A94343;

  font-size:12px;

  text-align:center;
}


.pin-change-save{
  width:100%;

  min-height:52px;

  margin-top:5px;

  padding:
    0 16px;

  border:0;

  border-radius:17px;

  background:#323B60;

  color:#fff;

  font-size:14px;
  font-weight:800;
}


.pin-change-save:disabled{
  opacity:.55;
}


/* CONFIRMACIÓN */

.confirm-pin-preview{
  margin:
    0 0 18px;

  padding:
    14px 16px;

  display:flex;

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

  border:
    1px solid
    rgba(50,59,96,.08);

  border-radius:16px;

  background:#F7F8FA;
}


.confirm-pin-preview span{
  color:#8B93A3;

  font-size:12px;
  font-weight:700;
}


.confirm-pin-preview strong{
  color:#323B60;

  font-size:19px;

  letter-spacing:4px;
}

/* =========================================================
   LOGOUT SHEET
========================================================= */

.logout-sheet{
  text-align:center;
}

.logout-sheet-icon{
  width:60px;
  height:60px;

  margin:
    0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:
    rgba(50,59,96,.08);

  color:#323B60;
}

.logout-sheet-icon svg{
  width:26px;
  height:26px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.logout-sheet-title{
  margin:
    4px 0 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:24px;
  font-weight:400;

  color:#26365D;
}

.logout-sheet-copy{
  max-width:320px;

  margin:
    0 auto 20px;

  color:#858E9F;

  font-size:13px;
  line-height:1.55;
}

.logout-confirm-btn{
  width:100%;

  min-height:52px;

  padding:
    0 16px;

  border:0;

  border-radius:17px;

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

  gap:8px;

  background:#323B60;

  color:#fff;

  font-size:14px;
  font-weight:800;
}

.logout-confirm-btn svg{
  width:19px;
  height:19px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.logout-confirm-btn:disabled{
  opacity:.55;
}

/* =========================================================
   INSTALAR PWA
========================================================= */

.install-app-sheet{
  text-align:center;
}

.install-app-icon{
  width:78px;
  height:78px;

  margin:
    2px auto 16px;

  padding:7px;

  border-radius:23px;

  background:#fff;

  box-shadow:
    0 10px 30px
    rgba(50,59,96,.14);
}

.install-app-icon img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  border-radius:18px;
}

.install-app-title{
  margin:
    5px 0 9px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:25px;
  font-weight:400;

  color:#26365D;
}

.install-app-copy{
  max-width:330px;

  margin:
    0 auto 22px;

  color:#858E9F;

  font-size:13px;
  line-height:1.6;
}

.install-app-primary{
  width:100%;

  min-height:53px;

  border:0;

  border-radius:17px;

  background:#323B60;

  color:#fff;

  font-size:14px;
  font-weight:800;
}

.install-app-primary:disabled{
  opacity:.55;
}


/* =========================================================
   iOS INSTALL
========================================================= */

.ios-install-steps{
  display:flex;
  flex-direction:column;

  gap:10px;

  margin-bottom:20px;

  text-align:left;
}

.ios-install-step{
  display:flex;
  align-items:center;

  gap:13px;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(50,59,96,.08);

  border-radius:17px;

  background:#F8F9FB;
}

.ios-step-number{
  width:32px;
  height:32px;

  flex:0 0 32px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(244,206,206,.65);

  color:#323B60;

  font-size:13px;
  font-weight:800;
}

.ios-install-step div{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.ios-install-step strong{
  color:#323B60;

  font-size:13px;
}

.ios-install-step span:not(.ios-step-number){
  color:#8B93A3;

  font-size:12px;
  line-height:1.4;
}

.share-symbol{
  display:inline-grid;
  place-items:center;

  width:22px;
  height:22px;

  margin:
    0 2px;

  border:
    1px solid
    rgba(50,59,96,.14);

  border-radius:6px;

  color:#323B60;

  font-size:17px;
  line-height:1;
}

/* =========================================================
   VIDEO
========================================================= */

.preview-media{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.preview-video-badge{
  position:absolute;

  left:10px;
  bottom:10px;

  padding:
    6px 9px;

  border-radius:999px;

  background:
    rgba(20,25,40,.78);

  color:#fff;

  font-size:11px;
  font-weight:700;

  backdrop-filter:
    blur(8px);
}


.progress-video-thumb{
  width:58px;
  height:58px;

  flex:0 0 58px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    #323B60;

  color:#fff;

  font-size:20px;
}

/* =========================================================
   VIDEOS EN ÁLBUM
========================================================= */

.gallery-item{
  position:relative;
  overflow:hidden;
}

.gallery-item video{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  pointer-events:none;
}


.gallery-video-play{
  position:absolute;

  left:50%;
  top:50%;

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

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

  border-radius:50%;

  background:
    rgba(20,25,40,.72);

  color:#fff;

  font-size:18px;

  padding-left:3px;

  backdrop-filter:
    blur(8px);

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

  pointer-events:none;
}


/* =========================================================
   VISOR VIDEO
========================================================= */

.viewer-stage .viewer-video{
  display:block;

  width:100%;
  max-width:100%;

  max-height:
    calc(100vh - 180px);

  object-fit:contain;

  background:#000;

  border-radius:12px;
}