.photo-experience{padding-top:90px}
.photo-launch-card{
  width:min(640px,100%);min-height:260px;margin:34px auto 0;padding:34px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  border:1px solid rgba(142,216,239,.34);border-radius:20px;
  background:
    radial-gradient(circle at 50% 18%,rgba(55,168,206,.2),transparent 40%),
    rgba(2,9,18,.82);
  color:#fff;cursor:pointer;box-shadow:0 28px 80px rgba(0,0,0,.35)
}
.photo-launch-card img{width:min(370px,78%);height:auto}
.photo-launch-card span{
  display:inline-flex;min-height:52px;align-items:center;justify-content:center;
  padding:0 24px;border:1px solid rgba(142,216,239,.7);border-radius:999px;
  font-weight:600;letter-spacing:.04em
}

.photo-modal[hidden]{display:none!important}
.photo-modal{
  position:fixed;inset:0;z-index:10020;display:grid;place-items:center;
  padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
}
.photo-modal-backdrop{
  position:absolute;inset:0;background:rgba(0,4,9,.88);backdrop-filter:blur(15px)
}
.photo-modal-dialog{
  position:relative;z-index:1;width:min(760px,100%);height:min(940px,100%);
  max-height:calc(100dvh - 20px);display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(142,216,239,.34);border-radius:24px;background:#020912;
  box-shadow:0 30px 100px rgba(0,0,0,.7)
}
.photo-modal-close{
  position:absolute;right:14px;top:14px;z-index:30;width:46px;height:46px;
  display:grid;place-items:center;border:1px solid rgba(142,216,239,.42);
  border-radius:50%;background:rgba(2,9,18,.82);color:#fff;cursor:pointer
}
.photo-modal-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.photo-modal-heading{padding:22px 72px 16px 22px;flex:0 0 auto}
.photo-modal-heading p{
  margin:0 0 5px;color:var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:.2em
}
.photo-modal-heading h2{margin:0;font-family:var(--serif);font-size:clamp(27px,6vw,44px)}

.photo-booth{min-height:0;flex:1;display:flex;flex-direction:column}
.photo-stage{
  position:relative;flex:1;min-height:0;width:100%;overflow:hidden;background:#020912
}
.photo-stage video,.photo-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.photo-stage video{display:none;transform:scaleX(-1)}
.photo-stage canvas{display:none}
.photo-welcome,.photo-countdown,.photo-processing,.photo-result-message{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:34px;z-index:4;
  background:linear-gradient(180deg,rgba(2,9,18,.15),rgba(2,9,18,.72))
}
.photo-welcome{display:flex}
.photo-welcome img,.photo-processing img{width:min(380px,76%);height:auto;margin-bottom:20px}
.photo-welcome p,.photo-processing p{margin:0;color:#d8e6ec}
.photo-countdown small{
  text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);font-size:11px
}
.photo-countdown strong{
  margin-top:8px;font-family:var(--serif);font-size:clamp(110px,34vw,230px);
  line-height:.9;text-shadow:0 0 34px rgba(142,216,239,.35)
}
.photo-processing{background:rgba(2,9,18,.87);backdrop-filter:blur(8px)}
.photo-result-message{
  inset:auto 0 86px 0;padding:54px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(2,9,18,.92));justify-content:flex-end
}
.photo-result-message strong{font-family:var(--serif);font-size:20px}
.photo-result-message span{margin-top:5px;color:#d4e2e8;font-size:13px}
.photo-flash{position:absolute;inset:0;z-index:8;background:#fff;opacity:0;pointer-events:none}
.photo-flash.active{animation:photoFlash .18s ease-out}
@keyframes photoFlash{0%{opacity:0}35%{opacity:.95}100%{opacity:0}}

.photo-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;gap:10px;
  align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 12px;
  background:linear-gradient(180deg,transparent,rgba(2,9,18,.96) 40%)
}
.photo-action[hidden]{display:none!important}
.photo-action{
  min-height:50px;border:1px solid rgba(142,216,239,.36);background:rgba(5,20,31,.88);
  color:#fff;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;cursor:pointer;text-decoration:none;border-radius:999px;backdrop-filter:blur(10px)
}
.photo-action svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto
}
.photo-action b{font-weight:600}
.photo-action.photo-primary{
  border-color:rgba(142,216,239,.82);
  background:linear-gradient(135deg,rgba(22,91,116,.96),rgba(5,25,39,.96))
}
.photo-status,.photo-privacy{
  flex:0 0 auto;margin:0;padding:9px 18px;text-align:center;font-size:11px
}
.photo-status{min-height:30px;color:var(--cyan)}
.photo-privacy{padding-top:0;color:var(--muted)}

.photo-booth[data-state="camera"] .photo-stage video{display:block}
.photo-booth[data-state="countdown"] .photo-stage video{display:block}
.photo-booth[data-state="countdown"] .photo-countdown{display:flex}
.photo-booth[data-state="processing"] .photo-processing{display:flex}
.photo-booth[data-state="result"] .photo-stage canvas{display:block}
.photo-booth[data-state="result"] .photo-result-message{display:flex}
.photo-booth[data-state="camera"] .photo-welcome,
.photo-booth[data-state="countdown"] .photo-welcome,
.photo-booth[data-state="processing"] .photo-welcome,
.photo-booth[data-state="result"] .photo-welcome{display:none}

body.photo-modal-open{overflow:hidden}
@media(max-width:560px){
  .photo-modal{padding:0}
  .photo-modal-dialog{
    width:100%;height:100dvh;max-height:100dvh;border-radius:0;border-left:0;border-right:0
  }
  .photo-modal-heading{padding-top:max(18px,env(safe-area-inset-top))}
  .photo-controls{gap:8px;padding:12px 8px max(12px,env(safe-area-inset-bottom))}
  .photo-action{min-height:47px;padding:0 14px;font-size:13px}
  .photo-result-message{bottom:100px}
  .photo-privacy{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .photo-flash.active{animation:none;opacity:.35}
}


/* ===== V6.3 FINAL · Photo Polish ===== */
.photo-modal-dialog{
  width:min(780px,100%);
  height:min(980px,100%);
}
.photo-stage{
  aspect-ratio:4/5;
  min-height:0;
}
.photo-stage video,
.photo-stage canvas{
  object-fit:cover;
  object-position:center 38%;
}
.photo-result-message{
  inset:auto 0 96px 0;
  padding:62px 22px 20px;
}
.photo-result-message strong{font-size:21px}
.photo-controls{padding-top:18px}
.photo-action.photo-primary{
  box-shadow:0 0 0 1px rgba(142,216,239,.12),0 8px 24px rgba(14,89,116,.24);
}
.photo-privacy{opacity:.72}
@media(max-width:560px){
  .photo-modal-dialog{
    height:100dvh;
    max-height:100dvh;
  }
  .photo-stage{
    aspect-ratio:auto;
    flex:1;
  }
  .photo-stage video,
  .photo-stage canvas{
    object-position:center 34%;
  }
  .photo-result-message{
    bottom:108px;
    padding-bottom:16px;
  }
}


/* ===== V6.3 FINAL POLISH ===== */
.photo-result-message{
  inset:auto 0 100px 0;
  padding:92px 22px 18px;
  background:
    linear-gradient(
      180deg,
      rgba(2,9,18,0) 0%,
      rgba(2,9,18,.08) 28%,
      rgba(2,9,18,.42) 66%,
      rgba(2,9,18,.88) 100%
    );
  transition:opacity .45s ease, visibility .45s ease;
}
.photo-result-message.is-hidden{
  opacity:0;
  visibility:hidden;
}
.photo-stage canvas{
  object-position:center 34%;
}
@media(max-width:560px){
  .photo-result-message{
    bottom:110px;
    padding-top:84px;
  }
}


/* ===== V6.3.2 FINAL RELEASE · CTA Compartir ===== */
.photo-save-fallback{
  display:none !important;
}
.photo-result-actions{
  width:100%;
  display:contents;
}
.photo-share-main{
  order:1;
  flex:0 0 100%;
  width:100%;
  min-height:60px;
  border-color:#ef233c !important;
  background:linear-gradient(135deg,#ef233c,#a90f25) !important;
  box-shadow:0 10px 28px rgba(239,35,60,.28) !important;
  font-size:16px;
}
.photo-share-main svg{
  width:23px;
  height:23px;
}
.photo-retake-secondary{
  order:2;
  min-height:44px;
  margin-top:2px;
  background:rgba(5,20,31,.72) !important;
  border-color:rgba(142,216,239,.30) !important;
  opacity:.92;
}
@media(max-width:560px){
  .photo-controls{
    padding-left:14px;
    padding-right:14px;
  }
  .photo-share-main{
    min-height:58px;
  }
}