:root{

  --color-fondo:        #12060a;   
  --color-rojo:         #e21b1b;   
  --color-rosa:         #ff2f87;   
  --color-rosa-suave:   #ffc9e3;   
  --color-flash:        #7c6bff;   
  --color-crema:        #f4ead9;   
  --color-tinta:        #241019;   


  --font-display: 'impact', system-ui, sans-serif;  
  --font-caption: 'arial', cursive;                     
  --font-ui:      'Space Grotesk', system-ui, sans-serif;

  
  --frame-screen-left:   18.1%;
  --frame-screen-top:    16.6%;
  --frame-screen-right:  34.7%;
  --frame-screen-bottom: 34%;

  --filtro-foto: contrast(1.22) brightness(1.14) saturate(1.55) hue-rotate(-4deg);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--color-fondo);
  color:var(--color-crema);
  font-family:var(--font-ui);
  overflow-x:hidden;
  height:100%;
  -webkit-tap-highlight-color:transparent;
}
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }

.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.flash{
  position:fixed; inset:0; z-index:80;
  background:#fff; opacity:0; pointer-events:none;
}
.flash.is-firing{ animation:flash-pop .5s ease-out; }
@keyframes flash-pop{
  0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; }
}


.duotone{ filter:var(--filtro-foto); }


 
.view{
  display:none;
  min-height:100dvh; width:100%;
  position:relative;
  flex-direction:column; align-items:center;
  padding:32px 24px 40px;
}
.view.is-active{ display:flex; animation:fade-in .5s ease both; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.back-btn{
  align-self:flex-start;
  background:none; border:none;
  color:var(--color-crema); opacity:.7;
  font-size:14px; letter-spacing:.02em;
  margin-bottom:12px;
}
.back-btn:hover{ opacity:1; }


.view--landing{ padding:0; justify-content:space-between; min-height:100dvh; }
.landing-bg{
  position:fixed; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.05);
}
.landing-veil{
  position:fixed; inset:0;
  background:linear-gradient(to top, rgba(10,4,6,.97) 8%, rgba(10,4,6,.55) 45%, rgba(10,4,6,.25) 70%, rgba(10,4,6,.55) 100%);
}
.landing-content{
  position:relative; z-index:2; width:100%; max-width:480px; margin:0 auto;
  padding:28px;
  text-align:center;
  flex:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:26px;
}
.landing-top{ margin:0; width:100%; }
.eyebrow{
  font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:var(--color-rosa); margin:0 0 10px;
}
.question{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px, 10vw, 56px); line-height:1.05;
  margin:0;
  text-shadow:0 0 24px rgba(255,47,135,.35);
}
.question .highlight{ color:var(--color-rosa); -webkit-text-stroke:1px rgba(255,255,255,.15); }


.landing-nombre{
  margin:22px auto 0;
  width:100%; max-width:300px;
}
.nombre-input--landing{
  width:100%;
  padding:12px 6px;
  border:none; border-bottom:2px solid rgba(244,234,217,.65);
  background:transparent;
  color:var(--color-crema);
  font-family:var(--font-caption);
  font-size:28px;
  text-align:center;
  outline:none;
  transition:border-color .2s ease;
}
.nombre-input--landing::placeholder{ color:rgba(244,234,217,.4); }
.nombre-input--landing:focus{ border-color:var(--color-rosa); }
.nombre-input--landing.is-empty-shake{ animation:nombre-shake .4s ease; border-color:var(--color-rojo); }
@keyframes nombre-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.landing-nombre__hint{
  margin:6px 0 0;
  font-size:11px; letter-spacing:.03em;
  color:rgba(244,234,217,.45);
  opacity:0;
  transition:opacity .2s ease;
}
.landing-nombre__hint.is-visible{ opacity:1; color:var(--color-rosa); }

.landing-footer{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 28px 26px; font-size:13px; opacity:.85;
}
.link-tape{ font-family:var(--font-caption); font-size:20px; color:var(--color-crema); border-bottom:1px solid rgba(244,234,217,.4); }
.link-tape--btn{ background:none; border-top:none; border-left:none; border-right:none; padding:0; }
.dot{ opacity:.5; }


.choices{ display:flex; gap:12px; justify-content:center; width:100%; margin:0; }
.chip{
  flex:1; padding:16px 10px;
  border-radius:999px;
  border:1.5px solid rgba(244,234,217,.25);
  background:rgba(244,234,217,.06);
  color:var(--color-crema);
  font-family:var(--font-display); font-size:14px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.chip:active{ transform:scale(.96); }
.chip--red:hover{ border-color:var(--color-rojo); background:rgba(226,27,27,.18); }
.chip--pink:hover{ border-color:var(--color-rosa); background:rgba(255,47,135,.18); }

.view--resultado-texto{ justify-content:center; min-height:100dvh; text-align:center; }
.texto-card{
  position:relative;
  width:100%; max-width:340px;
  padding:44px 30px;
  animation:card-in .6s cubic-bezier(.2,.8,.3,1.15) both;
}
@keyframes card-in{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.resultado-texto{
  font-family:var(--font-caption);
  font-size:clamp(30px, 8.5vw, 44px);
  line-height:1.25;
  color:var(--color-crema);
  text-shadow:0 0 20px rgba(255,47,135,.3);
  margin:0;
  min-height:2.5em;
}
.resultado-texto.is-typing::after{
  content:"|";
  margin-left:2px;
  color:var(--color-rosa);
  animation:cursor-blink 1s step-start infinite;
}
@keyframes cursor-blink{ 50%{ opacity:0; } }

.view--camara{ justify-content:center; min-height:100dvh; }
.camera__title{
  font-family:var(--font-caption); font-size:22px;
  color:var(--color-rosa-suave);
  margin:0 0 16px; text-align:center;
}
.camera{
  position:relative;
  width:260px;
  aspect-ratio:680/860; 
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
}
.camera.is-shaking{ animation:cam-shake .5s ease; }
@keyframes cam-shake{
  0%,100%{ transform:translate(0,0) rotate(0); }
  15%{ transform:translate(-4px,2px) rotate(-1.5deg); }
  30%{ transform:translate(4px,-2px) rotate(1.5deg); }
  45%{ transform:translate(-3px,1px) rotate(-1deg); }
  60%{ transform:translate(3px,-1px) rotate(1deg); }
  80%{ transform:translate(-1px,1px) rotate(0); }
}
.camera__screen{
  position:absolute;
  left:var(--frame-screen-left);
  top:var(--frame-screen-top);
  right:var(--frame-screen-right);
  bottom:var(--frame-screen-bottom);
  background:#1c0e13;
  border-radius:6px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.camera__screen img{ width:100%; height:100%; object-fit:cover; display:none; }
.camera__screen.has-photo img{ display:block; }
.camera__screen.has-photo .camera__placeholder{ display:none; }
.camera__placeholder{
  font-family:var(--font-ui); font-size:10px; text-align:center; padding:0 14px;
  color:rgba(244,234,217,.45);
}

.camera__screen-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.3), transparent 55%),
    radial-gradient(circle at 50% 55%, transparent 45%, rgba(20,4,10,.55) 100%),
    linear-gradient(160deg, rgba(255,47,135,.28), rgba(124,107,255,.12));
  mix-blend-mode:soft-light;
}
.camera__rec{
  position:absolute; top:8px; left:8px; z-index:3;
  display:flex; align-items:center; gap:4px;
  font-size:8px; letter-spacing:.08em; color:rgba(244,234,217,.8);
  font-family:var(--font-ui);
}
.camera__rec-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--color-rojo);
  animation:rec-blink 1.2s ease-in-out infinite;
}
@keyframes rec-blink{ 50%{ opacity:.25; } }
.camera__frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none; 
}

.camera__eject{
  position:absolute;
  left:50%; bottom:10%;
  transform:translate(-50%, -6%);
  width:58%;
  aspect-ratio:1/1.18;
  background:var(--color-crema);
  border-radius:3px;
  padding:6px 6px 16px;
  box-shadow:0 18px 34px rgba(0,0,0,.5);
  z-index:0;
  clip-path:inset(0 0 100% 0);
  opacity:0;
}
.camera__eject-photo{
  width:100%; height:100%;
  background:#1c0e13;
  border-radius:2px;
  overflow:hidden;
}
.camera__eject-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;
  transition:opacity .5s ease .35s;
}
.camera.is-ejecting .camera__eject{
  animation:eject-slide 1.1s cubic-bezier(.32,.68,.24,1) forwards;
}
.camera.is-ejecting .camera__eject-photo img{ opacity:1; }
@keyframes eject-slide{
  0%{ clip-path:inset(0 0 100% 0); transform:translate(-50%, -6%); opacity:1; }
  55%{ clip-path:inset(0 0 0% 0); transform:translate(-50%, 44%); opacity:1; }
  100%{ clip-path:inset(0 0 0% 0); transform:translate(-50%, 58%); opacity:1; }
}
.camera__controls{
  display:flex; align-items:center; gap:14px;
  margin-top:22px;
}
.camera__btn{
  border:none; border-radius:999px;
  font-family:var(--font-ui); font-size:12px;
  color:var(--color-tinta);
  background:var(--color-crema);
  padding:12px 18px;
  transition:transform .15s ease;
}
.camera__btn--upload:hover{ transform:translateY(-1px); }
.camera__btn--upload{ position:relative; }
.camera__btn--shutter{
  width:56px; height:56px; padding:0;
  background:var(--color-rosa);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px rgba(255,47,135,.2), 0 8px 20px rgba(255,47,135,.35);
}
.camera__btn--shutter:disabled{ opacity:.4; box-shadow:none; }
.shutter-dot{ width:24px; height:24px; border-radius:50%; background:var(--color-crema); transition:transform .12s ease; }
.camera__btn--shutter:not(:disabled):active .shutter-dot{ transform:scale(.82); }
.camera__hint{ margin-top:16px; font-size:12px; opacity:.55; text-align:center; max-width:280px; }


.view--resultado-imagen{ justify-content:center; min-height:100dvh; }
.polaroid{
  position:relative;
  width:100%; max-width:300px;
  background:var(--color-crema);
  padding:16px 16px 30px;
  border-radius:6px;
  box-shadow:0 28px 55px rgba(0,0,0,.55);
  transform:translateY(30px) rotate(2deg) scale(.9);
  opacity:0;
  animation:eject .7s cubic-bezier(.2,.9,.3,1.2) .15s forwards;
}
@keyframes eject{ to{ transform:translateY(0) rotate(-1.4deg) scale(1); opacity:1; } }

.polaroid__tape{
  position:absolute; top:-13px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:120px; height:30px;
  background:linear-gradient(100deg, rgba(255,220,236,.6), rgba(255,190,222,.8) 55%, rgba(255,220,236,.6));
  clip-path:polygon(2% 6%, 98% 0%, 100% 90%, 3% 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}

.polaroid__photo{
  position:relative;
  width:100%; aspect-ratio:1/1;
  background:#1c0e13;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
}
.polaroid__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.polaroid__photo-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.32), transparent 55%),
    radial-gradient(circle at 50% 55%, transparent 45%, rgba(20,4,10,.5) 100%),
    linear-gradient(160deg, rgba(255,47,135,.3), rgba(124,107,255,.12));
  mix-blend-mode:soft-light;
}
.polaroid__caption{
  margin:16px 0 0;
  text-align:center;
  font-family:var(--font-caption); font-size:26px;
  color:var(--color-tinta);
}

.resultado-footer{ display:flex; align-items:center; gap:10px; margin-top:26px; font-size:13px; }

.tap-hint{
  margin:14px 0 0; font-size:11px; letter-spacing:.02em;
  color:rgba(244,234,217,.45); text-align:center;
}
.texto-card, .polaroid{ cursor:pointer; }


.save-modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(8,3,5,.9);
}
.save-modal.is-open{ display:flex; }
.save-modal__backdrop{ position:absolute; inset:0; }
.save-modal__card{
  position:relative; z-index:1;
  width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center;
  animation:card-in .35s ease both;
}
.save-modal__close{
  position:absolute; top:-40px; right:0;
  background:none; border:none;
  color:var(--color-crema); font-size:20px; opacity:.8;
  padding:10px;
}
.save-modal__hint{
  font-family:var(--font-ui); font-size:13px; line-height:1.5;
  color:var(--color-crema); text-align:center;
  margin:0 0 14px;
}
.save-modal__hint b{ color:var(--color-rosa-suave); }
.save-modal__img{
  width:100%; border-radius:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  -webkit-touch-callout:default; 
  -webkit-user-select:none;
  user-select:none;
}

@media (max-width:340px){ .camera{ width:230px; } }