/* ------------------------------------------------------------------ fuentes del Figma */
@font-face {
  font-family: 'Cormorant SC';
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/cormorant-sc-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant SC';
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/cormorant-sc-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant SC';
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/cormorant-sc-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-display: swap;
  src: url('fuentes/lato-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/lato-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/lato-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fondo: #232221;          /* el lienzo del Figma */
  --tinta: #efe9dc;
  --tenue: rgba(239, 233, 220, 0.6);
  --panel: rgba(28, 27, 26, 0.78);
  --placa: #e2d4ad;          /* placa "Explosión" del dial */
  --dial: clamp(150px, 16vw, 220px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Lato', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* WebGL abajo; encima la capa CSS3D con las polaroids (solo ellas reciben el puntero) */
.escena { position: fixed; inset: 0; }
.escena canvas { position: absolute; inset: 0; display: block; touch-action: none; z-index: 0; }
.escena .css3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ------------------------------------------------------------------ texto */
.encabezado {
  position: fixed;
  z-index: 2;
  left: 28px;
  bottom: 26px;
  max-width: min(360px, 40vw);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.encabezado h1 { margin: 0 0 6px; font: 600 30px/1.05 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; }
.encabezado p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--tenue); }

.pista {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  margin: 0;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--tenue);
  font-size: 13px;
  text-align: center;
  max-width: calc(100vw - 32px);
  transition: opacity 0.6s ease;
}
.pista .pista-foco { display: none; }
.enfocado .pista .pista-general { display: none; }
.enfocado .pista .pista-foco { display: inline; }
.pista.oculta { opacity: 0; pointer-events: none; }
.enfocado .pista.oculta { opacity: 1; }

/* al acercarse a una foto, lo demás se corre del camino */
.enfocado .encabezado,
.enfocado .dial { opacity: 0 !important; pointer-events: none !important; }

/* ------------------------------------------------------------------ dial */
.dial {
  position: fixed;
  z-index: 2;
  right: clamp(16px, 4vw, 64px);
  top: 52%;
  width: var(--dial);
  transform: translateY(-45%);
  touch-action: none;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.5s ease;
}
.dial.girando { cursor: grabbing; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.dial-bisel { fill: none; stroke: #d9d9d9; stroke-width: 70; stroke-linecap: round; }
.dial-cuerpo { fill: #d9d9d9; }
.dial-anillo { fill: #c0c0c0; }
.dial-centro { fill: #111111; }
.dial-escala line { stroke: #2b2b2b; stroke-width: 6; stroke-linecap: round; }
.dial-perilla line { stroke: #b5b5b5; stroke-width: 6; stroke-linecap: round; }
.dial-perilla line.aguja { stroke: #f1ead6; stroke-width: 8; }
.dial-placa rect { fill: var(--placa); }
.dial-placa text { fill: #3a3a3a; font: 400 46px 'Lato', system-ui, sans-serif; text-anchor: middle; }
.dial-placa { cursor: pointer; }
.dial:focus-visible svg { filter: drop-shadow(0 0 6px #9fc2ff); }
.dial-ayuda {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* ------------------------------------------------------------------ acercarse a la cámara */
.marcadores { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.45s ease; }
.marcadores.visible { opacity: 1; }
.marcador { position: absolute; left: 0; top: 0; will-change: transform; }
.marcador i {
  display: block;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--placa);
  border-radius: 50%;
  animation: pulso 1.9s ease-out infinite;
}
.marcador { transition: opacity 0.3s ease; }
.marcador.activo { opacity: 0; }
.marcador span {
  position: absolute;
  top: -12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--tinta);
  font: 400 11px 'Lato', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marcador.izq span { right: 24px; }
.marcador.der span { left: 24px; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(226, 212, 173, 0.55); }
  100% { box-shadow: 0 0 0 20px rgba(226, 212, 173, 0); }
}
@media (prefers-reduced-motion: reduce) { .marcador i { animation: none; } }

.explica {
  position: fixed;
  z-index: 4;
  top: 50%;
  right: 0;
  width: min(390px, 88vw);
  max-height: 84vh;
  overflow: auto;
  padding: 28px 30px 30px;
  border-radius: 18px 0 0 18px;
  background: #fbf7e8;
  color: #412e20;
  box-shadow: -18px 22px 60px rgba(0, 0, 0, 0.45);
  transform: translate(110%, -50%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.explica.abierta { transform: translate(0, -50%); }
.explica-cerrar {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #412e20;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.explica-cerrar:hover { background: rgba(65, 46, 32, 0.08); }
.explica-cerrar:focus-visible { outline: 2px solid #84592b; outline-offset: 2px; }
.explica-sobre { display: block; font: 400 11px 'Lato', system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #84592b; }
.explica-titulo { margin: 6px 0 14px; font: 600 32px/1.05 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; }
.explica p { margin: 0 0 12px; font: 400 15px/1.5 'Lato', system-ui, sans-serif; }
.explica-corte { display: flex; align-items: center; gap: 14px; margin: 20px 0 8px; }
.explica-toggle {
  position: relative;
  flex: none;
  width: 56px;
  height: 31px;
  border: 0;
  border-radius: 999px;
  background: rgba(65, 46, 32, 0.28);
  cursor: pointer;
  transition: background 0.3s ease;
}
.explica-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fbf7e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}
.explica-toggle[aria-checked='true'] { background: #8c2f1a; }
.explica-toggle[aria-checked='true']::after { transform: translateX(25px); }
.explica-toggle:focus-visible { outline: 2px solid #84592b; outline-offset: 3px; }
.explica-corte label { font: 600 16px 'Lato', system-ui, sans-serif; cursor: pointer; }
.explica .explica-resultado { margin: 4px 0 0; font: italic 400 17px/1.4 Georgia, 'Times New Roman', serif; color: #84592b; }
.explica.ancha { width: min(560px, 92vw); }
.explica-arco { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.explica-arco .banda { fill: #f2e6c8; stroke: #412e20; stroke-width: 2.5; }
.explica-arco .mayor { stroke: #412e20; stroke-width: 2.5; stroke-linecap: round; }
.explica-arco .menor { stroke: #412e20; stroke-width: 1.5; stroke-linecap: round; }
.explica-arco .hoy { stroke: #8c2f1a; stroke-width: 4; stroke-linecap: round; }
.explica-arco text { fill: #412e20; font-family: 'Lato', system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; white-space: pre; }
.explica-arco .eti { font-size: 21px; font-weight: 400; }
.explica-arco .ahora { font-size: 19px; font-weight: 700; letter-spacing: 0.1em; }
.explica-arco .lado { font-size: 17px; font-weight: 700; }
.explica-arco .nota { font: italic 400 21px Georgia, 'Times New Roman', serif; }

/* ------------------------------------------------------------------ polaroids colgadas */
.polaroid {
  position: relative;
  width: 640px;
  height: 800px;
  background: #fbfaf6;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(0, 0, 0, 0.08);
  color: #412e20;
  pointer-events: auto;
}
.polaroid.dormida { cursor: zoom-in; }
/* dormida (vista general): el clic es para acercarse, nada de adentro responde */
.polaroid.dormida .foto, .polaroid.dormida .foto * { pointer-events: none !important; }
.polaroid.dormida:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(226, 212, 173, 0.55); }
.polaroid .pinza {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -80px;
  width: 46px;
  height: 124px;
  margin-left: -23px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.22));
}
/* pinza plana: cuerpo de un solo color, cabeza ancha arriba y las dos mordazas abajo */
.polaroid .pinza i {
  position: absolute;
  inset: 0;
  clip-path: polygon(10% 0, 90% 0, 100% 9%, 100% 50%, 86% 100%, 14% 100%, 0 50%, 0 9%);
  background: #c99a5b;
}
/* la rendija entre las dos mordazas */
.polaroid .pinza::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 53px;
  bottom: 3px;
  width: 3px;
  margin-left: -1.5px;
  background: #8a5f2e;
}
/* el resorte, justo donde pasa la cuerda */
.polaroid .pinza::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 36px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: #9a9a95;
  box-shadow: inset 0 0 0 5px #b9b9b4;
}
.polaroid .foto {
  position: absolute;
  left: 28px;
  top: 24px;
  width: 584px;
  height: 600px;
  background: #fff9e9;
  overflow: hidden;
}
.polaroid .pie { position: absolute; left: 34px; right: 34px; top: 646px; }
.polaroid .pie h2 { margin: 0; font: 600 44px/1 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; color: #412e20; }
.polaroid .pie p {
  margin: 14px 0 0;
  font: 400 13px 'Lato', system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #84592b;
}

/* ------------------------------------------------------------------ pantallas angostas */
@media (max-width: 760px) {
  :root { --dial: 118px; }
  .dial { top: auto; bottom: 58px; right: 16px; transform: none; }
  .dial-ayuda { display: none; }
  .encabezado { top: 16px; bottom: auto; left: 16px; max-width: 72vw; }
  .encabezado h1 { font-size: 22px; }
  .encabezado p { display: none; }
  .pista { font-size: 11.5px; bottom: 12px; padding: 6px 12px; }
  .explica {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 52vh;
    padding: 22px 22px 26px;
    border-radius: 18px 18px 0 0;
    transform: translateY(104%);
  }
  .explica.abierta { transform: translateY(0); }
  .explica-titulo { font-size: 26px; }
}