/* DUBFOTOBOOTH — tokens copiados de dubrowsky-brand.css (fuente canónica).
   Fuentes self-hosteadas: el hotspot no deja pasar Google Fonts. */

@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cheese Milky'; /* la voz de Dubi */
  src: url('fonts/CheeseMilky.otf') format('opentype');
  font-display: swap;
}

:root {
  --red:       #E63946;
  --red-deep:  #A8231D;
  --gold:      #E8A20B;
  --gold-soft: #F0B429;
  --paper:     #F3E7C9;
  --cream:     #FAF3E1;
  --ink:       #181510;
  --ink-soft:  #4A4237;
  --radius: 10px;
  --hard-shadow: 4px 4px 0 var(--ink);
  --hard-shadow-sm: 3px 3px 0 var(--ink);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--cream); color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.display {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; line-height: 1; letter-spacing: .5px;
}
.hero {
  width: 100%; background: var(--gold); padding: 34px 22px 26px;
  border-bottom: 3px solid var(--ink); position: relative;
}
.hero .halftone {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(24,21,16,.08) 1px, transparent 1px);
  background-size: 7px 7px;
}
.hero h1 { font-size: 46px; color: var(--red-deep); }
.tag {
  display: inline-block; background: var(--ink); color: var(--gold-soft);
  font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  font-size: 12px; padding: 8px 18px; margin-top: 12px;
}
.filmstrip {
  width: 100%; height: 24px; background-color: var(--ink);
  background-image: repeating-linear-gradient(90deg,
    transparent 0 12px, var(--gold-soft) 12px 24px, transparent 24px 36px);
  background-size: 36px 9px; background-position: 0 center; background-repeat: repeat-x;
}
.contenido { width: 100%; max-width: 400px; padding: 26px 22px; }
.btn {
  display: block; width: 100%; padding: 18px; margin-top: 14px;
  background: var(--red); color: #fff; text-decoration: none;
  font-family: var(--font-body); font-weight: 800; font-size: 21px;
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--hard-shadow-sm); cursor: pointer;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.sec { background: var(--paper); color: var(--ink); font-size: 16px; padding: 14px; }
.btn:disabled { opacity: .45; }
.aviso { color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; margin-top: 12px; }
.aviso b { color: var(--ink); }
.chico { color: var(--ink-soft); opacity: .75; font-size: 12.5px; margin-top: 14px; }
.card {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--hard-shadow); padding: 18px; margin-top: 18px;
}
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.foto-item { position: relative; }
.fotos img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--paper);
}
.foto-item a.dl {
  position: absolute; right: 6px; bottom: 6px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px;
  padding: 4px 9px; box-shadow: 2px 2px 0 var(--ink);
}
.spinner {
  width: 46px; height: 46px; border-radius: 50%; margin: 26px auto 0;
  border: 4px solid var(--paper); border-top-color: var(--red);
  animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
video { width: 100%; border: 2px solid var(--ink); border-radius: var(--radius); margin-top: 12px; background: #000; }
.permiso {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 12px 14px; margin-top: 14px; font-size: 14.5px; line-height: 1.4;
}
.permiso input { width: 22px; height: 22px; accent-color: var(--red); flex: 0 0 22px; margin-top: 1px; }
footer { margin-top: auto; padding: 26px 20px; color: var(--ink-soft); font-size: 13px; }
footer a { color: var(--red-deep); }

/* ---- la visita de Dubi: se escapa de la vidriera y aparece acá ---- */
.dubi-caja {
  background: #000; border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--hard-shadow-sm);
  padding: 16px 14px 12px; margin-top: 14px;
  opacity: 0; transform: translateY(-90px) scale(0.5);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.dubi-caja.presente { opacity: 1; transform: none; }
.dubi-ojos { line-height: 0; }
.dubi-ojos .ojo {
  display: inline-block; width: 30px; height: 44px; background: #fff;
  border-radius: 50%; margin: 0 7px; position: relative;
  animation: dubi-parpadeo 4.5s infinite;
}
.dubi-ojos .ojo i {
  position: absolute; width: 13px; height: 13px; background: #000;
  border-radius: 50%; left: 8.5px; top: 9px;
  animation: dubi-mira-boton 3.4s infinite;
}
@keyframes dubi-parpadeo {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}
@keyframes dubi-mira-boton {
  0%, 22% { top: 9px; }
  40%, 78% { top: 25px; }  /* mira para abajo, hacia el botón */
  96% { top: 9px; }
}
.dubi-dice {
  font-family: 'Cheese Milky', 'Comic Sans MS', sans-serif;
  color: #fff; font-size: 19px; margin-top: 10px;
}
.dubi-caja.mini { padding: 12px 12px 10px; margin-top: 18px; box-shadow: none; }
.dubi-caja.mini .ojo { width: 22px; height: 32px; margin: 0 5px; }
.dubi-caja.mini .ojo i { width: 10px; height: 10px; left: 6px; top: 6px; }
.dubi-caja.mini .dubi-dice { font-size: 17px; margin-top: 7px; }