/* La cámara de fotos del cierre (Max, 14/10): ver camara.js. Es un objeto 3D hecho con CSS (caras con preserve-3d), sin
   imágenes: cuero, metal, cromo, lente de anillos apilados con grabado, flash de Fresnel y visor. Solo se animan
   transform y opacity; los degradados se pintan una vez. */
.cam { position: relative; width: 100%; height: 380vh; }
/* En el celular, menos recorrido: con el dedo, 4 pantallas de escena eran muchas pasadas (Max). */
@media (max-width: 700px) { .cam { height: 290vh; } }
/* Con el dedo la cámara se arma sola al llegar (camara.js, realCam): el tramo del armado (un tercio) no lleva scroll. Las fotos
   conservan su largo: 100 + (alto − 100) × .665. */
.cam.cam-sola { height: 286vh; }
/* Prueba de escritorio: el tiempo de armado ya no se paga con casi dos
   pantallas vacías de scroll. Se puede seguir bajando durante toda la tanda. */
.cam.cam-sola.cam-libre { height: 120svh; }
@media (max-width: 700px) { .cam.cam-sola { height: 226vh; } }
@media (prefers-reduced-motion: reduce) { .cam.cam-sola { height: auto; } }
/* Parada del imán al final de la cámara (camara.js): un tirón fuerte frena acá y se ve el armado y las fotos saliendo. */
.cam-parada { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
.cam-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; perspective: 1300px; perspective-origin: 50% 42%; }
.cam-pin > * { grid-area: 1 / 1; }
.cam-halo { position: absolute; inset: -10%; background: radial-gradient(closest-side at 50% 50%, #ff2f6a30, #7b2cff16 55%, transparent 75%); opacity: 0; pointer-events: none; will-change: opacity; }

/* Las puertas: Instagram y Cómo llegar, juntas al centro; camara.js las separa y las sube a las esquinas. */
.cam-puertas { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none; }
.cam-puertas a { grid-area: 1 / 1; box-sizing: border-box; pointer-events: auto; will-change: transform; white-space: nowrap; border-color: #fb8abe; color: #fff; background: linear-gradient(120deg, #35132b, #171126); box-shadow: inset 0 0 14px #ff68b51a, 0 0 20px #fa39992b; min-height: 48px; }
@media (max-width: 700px) { .cam-puertas a { min-height: 44px; padding: 0 14px; font-size: 11px; letter-spacing: .12em; } }

/* ---- El objeto ---- */
.cam-3d { position: relative; z-index: 5; width: 0; height: 0; transform-style: preserve-3d; cursor: pointer; outline: none; --s: 1px; }
.cam-3d:focus-visible .cara.frente { box-shadow: 0 0 0 3px #fff; }
.cp { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.cp > * { position: absolute; }
.cp .luz { inset: 0; border-radius: inherit; background: #000; opacity: .3; pointer-events: none; will-change: opacity; }   /* capa propia: cambiar la luz no repinta la cara */
.cara { border-radius: calc(10 * var(--s)); }

/* Cuero negro granulado con borde de goma, y metal anodizado grafito cepillado. */
.cuero { background:
  radial-gradient(circle at 30% 30%, #ffffff12 0 .6px, transparent 1.1px) 0 0 / calc(4 * var(--s)) calc(4 * var(--s)),
  radial-gradient(circle at 70% 60%, #00000066 0 .8px, transparent 1.3px) 0 0 / calc(5 * var(--s)) calc(5 * var(--s)),
  linear-gradient(180deg, #232129 0%, #141218 55%, #0c0b0f 100%);
  box-shadow: inset 0 0 0 calc(2 * var(--s)) #0a090c, inset 0 calc(3 * var(--s)) 0 calc(2 * var(--s)) #ffffff10; }
.metal { background:
  repeating-linear-gradient(90deg, #ffffff07 0 1px, transparent 1px 3px),
  linear-gradient(180deg, #3a3842 0%, #24232a 45%, #18171c 100%);
  box-shadow: inset 0 calc(1.5 * var(--s)) 0 #ffffff2e, inset 0 calc(-2 * var(--s)) calc(4 * var(--s)) #0008; }

/* Frente: franja de neón con brillo, nombre en cursiva, etiqueta FOTOS, ranura de salida, grabado chico y filete de cromo. */
.frente { border-radius: calc(14 * var(--s)) calc(14 * var(--s)) calc(24 * var(--s)) calc(24 * var(--s)); overflow: hidden; }
.frente .franja { left: 0; right: 0; top: calc(132 * var(--s)); height: calc(20 * var(--s));
  background: linear-gradient(180deg, #ffffff55 0, transparent 30%, transparent 70%, #0005), linear-gradient(90deg, #ff2f6a, #ff6b3d 38%, #ff3fa8 62%, #b23bff);
  box-shadow: 0 0 calc(14 * var(--s)) #ff2f6a77, inset 0 0 0 calc(.6 * var(--s)) #ffffff22; }
.frente .marca { left: calc(20 * var(--s)); top: calc(131 * var(--s)); height: calc(22 * var(--s)); display: flex; align-items: center; font: italic 700 calc(17 * var(--s)) var(--body); color: #fff; text-shadow: 0 1px 0 #0006; }
.frente .etiq { right: calc(20 * var(--s)); top: calc(131 * var(--s)); height: calc(22 * var(--s)); display: flex; align-items: center; font: 800 calc(13 * var(--s)) var(--body); letter-spacing: .34em; color: #fff; text-shadow: 0 0 calc(6 * var(--s)) #fff9; opacity: 0; will-change: opacity; }
.frente .ranura { left: calc(62 * var(--s)); right: calc(62 * var(--s)); bottom: calc(14 * var(--s)); height: calc(7 * var(--s)); border-radius: calc(4 * var(--s));
  background: linear-gradient(180deg, #000 0 60%, #1d1c22); box-shadow: inset 0 calc(2 * var(--s)) calc(3 * var(--s)) #000, 0 calc(1 * var(--s)) 0 #ffffff1c; }
.frente .grabado { left: calc(20 * var(--s)); bottom: calc(26 * var(--s)); font: 600 calc(7 * var(--s)) var(--body); letter-spacing: .22em; color: #ffffff3d; text-shadow: 0 -1px 0 #000; white-space: nowrap; }
.frente .borde-cromo { will-change: transform; left: -30%; right: -30%; top: 0; height: calc(3 * var(--s)); border-radius: 2px;
  background: linear-gradient(90deg, transparent 0, #8d8b94 20%, #fff 34%, #9b99a2 46%, #3d3c43 60%, #c9c7cf 74%, transparent 100%); opacity: .75; }
.atras .tapa-film { left: calc(30 * var(--s)); right: calc(30 * var(--s)); top: calc(30 * var(--s)); bottom: calc(30 * var(--s)); border-radius: calc(8 * var(--s)); box-shadow: inset 0 0 0 calc(1.5 * var(--s)) #000, inset 0 calc(1.5 * var(--s)) 0 calc(1.5 * var(--s)) #ffffff10; }
.tornillo { width: calc(7 * var(--s)); height: calc(7 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9d7de, #5b5960 55%, #1e1d22); box-shadow: 0 0 0 1px #000; }
.tornillo::after { content: ""; position: absolute; left: 20%; right: 20%; top: 45%; height: 12%; background: #0008; transform: rotate(35deg); }
.t1 { left: calc(14 * var(--s)); top: calc(14 * var(--s)); } .t2 { right: calc(14 * var(--s)); bottom: calc(14 * var(--s)); }
.anclaje { left: calc(58 * var(--s)); top: calc(30 * var(--s)); width: calc(24 * var(--s)); height: calc(14 * var(--s)); border-radius: calc(7 * var(--s)); background: linear-gradient(180deg, #8a8890, #2c2b31); box-shadow: inset 0 0 0 calc(3 * var(--s)) #111; }
.usb { left: calc(56 * var(--s)); bottom: calc(26 * var(--s)); width: calc(28 * var(--s)); height: calc(8 * var(--s)); border-radius: calc(3 * var(--s)); background: #050507; box-shadow: inset 0 0 0 1px #3a3940; }
.techo { border-radius: calc(14 * var(--s)); } .piso { border-radius: calc(14 * var(--s)); background: #0b0a0d; }
.rosca { left: 50%; top: 50%; width: calc(26 * var(--s)); height: calc(26 * var(--s)); margin: calc(-13 * var(--s)); border-radius: 50%; background: repeating-radial-gradient(circle, #2b2a30 0 1px, #111 1px 3px); }

/* Joroba: flash con lente de Fresnel y brillo, visor de vidrio, fotocelda y un led que respira. */
.j-frente { border-radius: calc(18 * var(--s)) calc(18 * var(--s)) calc(6 * var(--s)) calc(6 * var(--s)); }
.flash { left: calc(22 * var(--s)); top: calc(18 * var(--s)); width: calc(108 * var(--s)); height: calc(46 * var(--s)); border-radius: calc(6 * var(--s)); overflow: hidden;
  background: repeating-linear-gradient(90deg, #fbf8f2 0 calc(2.6 * var(--s)), #d2ccc2 calc(2.6 * var(--s)) calc(3.4 * var(--s)), #eee9e0 calc(3.4 * var(--s)) calc(5.2 * var(--s))),
    radial-gradient(ellipse at 50% 50%, #fff, #cfc9bf);
  background-blend-mode: multiply; box-shadow: 0 0 0 calc(3 * var(--s)) #0c0b0f, 0 0 0 calc(4.5 * var(--s)) #55535c, inset 0 0 calc(10 * var(--s)) #0004; }
.flash-brillo { inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffffd0 47%, transparent 58%); animation: cam-brillo 5.5s ease-in-out infinite; }
@keyframes cam-brillo { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.visor { left: calc(170 * var(--s)); top: calc(20 * var(--s)); width: calc(48 * var(--s)); height: calc(40 * var(--s)); border-radius: calc(9 * var(--s));
  background: radial-gradient(circle at 34% 28%, #d7f1ff 0 7%, #7ab6ff22 14%, transparent 22%), radial-gradient(ellipse at 50% 60%, #3a5c9a, #101a33 55%, #04060c);
  box-shadow: 0 0 0 calc(3 * var(--s)) #0c0b0f, 0 0 0 calc(4.5 * var(--s)) #55535c, inset 0 0 calc(8 * var(--s)) #000; }
.fotocelda { left: calc(142 * var(--s)); top: calc(26 * var(--s)); width: calc(18 * var(--s)); height: calc(18 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6d6a78, #1c1a22 60%); box-shadow: 0 0 0 calc(2 * var(--s)) #0c0b0f; }
.led { left: calc(147 * var(--s)); top: calc(56 * var(--s)); width: calc(8 * var(--s)); height: calc(8 * var(--s)); border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 calc(8 * var(--s)) #ff3b5c; animation: cam-led 2.6s ease-in-out infinite; }
@keyframes cam-led { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.j-techo { border-radius: calc(16 * var(--s)); }
.grabado-top { left: 0; right: 0; top: 40%; text-align: center; font: 700 calc(11 * var(--s)) var(--body); letter-spacing: .4em; color: #ffffff30; text-shadow: 0 -1px 0 #000; }
.zapata { left: calc(95 * var(--s)); top: calc(16 * var(--s)); width: calc(60 * var(--s)); height: calc(16 * var(--s)); border-radius: calc(3 * var(--s)); background: linear-gradient(180deg, #5f5d66, #2a2930); box-shadow: inset 0 0 0 1px #111; }

/* Reflejo grande y suave que se desliza por el frente al girar, y el contador de fotos del techo (baja con cada foto). */
.reflejo-frente { left: -40%; top: 0; bottom: 0; width: 70%; background: linear-gradient(100deg, transparent 0, #ffffff10 40%, #ffffff1c 50%, #ffffff08 60%, transparent 100%); will-change: transform; pointer-events: none; }
.contador { left: calc(30 * var(--s)); top: calc(30 * var(--s)); width: calc(40 * var(--s)); height: calc(26 * var(--s)); border-radius: calc(4 * var(--s)); background: linear-gradient(180deg, #13261c, #0a140f); box-shadow: inset 0 0 0 calc(1.5 * var(--s)) #000, 0 0 0 calc(1.5 * var(--s)) #4a4851; display: grid; place-items: center; }
.contador b { font: 700 calc(15 * var(--s)) ui-monospace, monospace; color: #8dffb8; text-shadow: 0 0 calc(5 * var(--s)) #46ff95aa; letter-spacing: .05em; }
/* Bordes con luz: las aristas verticales del frente y de los costados brillan apenas, como un canto pulido. */
.frente::after, .izq::after, .der::after, .j-frente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, #ffffff22 0, transparent calc(4 * var(--s)), transparent calc(100% - 4 * var(--s)), #ffffff14 100%); }
.correa { backface-visibility: visible; -webkit-backface-visibility: visible; }
.correa svg { inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(4 * var(--s)) calc(4 * var(--s)) #0009); }
.correa .luz { display: none; }

/* Lente. */
.disco { border-radius: 50%; }
.bisel { background: conic-gradient(from 210deg, #9c9aa3, #3a3940, #d6d4dc, #45444b, #b1afb7, #2d2c33, #9c9aa3); box-shadow: 0 0 calc(18 * var(--s)) #0009, inset 0 0 0 calc(5 * var(--s)) #0e0d11; }
.barril { background: repeating-conic-gradient(#1b1a20 0 2.2deg, #34333b 2.2deg 4.4deg); box-shadow: inset 0 0 0 calc(2 * var(--s)) #0b0a0e; }
.aro { background: radial-gradient(circle, transparent 0 34%, #0d0c10 35% 36.5%, transparent 37%),
  conic-gradient(from 30deg, #2a2930, #5a5862, #23222a, #4b4a52, #2a2930); box-shadow: inset 0 0 0 calc(2 * var(--s)) #77757e, inset 0 0 0 calc(4 * var(--s)) #0d0c10; }
.aro { -webkit-mask: radial-gradient(circle, transparent 0 35.5%, #000 36.2%); mask: radial-gradient(circle, transparent 0 35.5%, #000 36.2%); }
.aro svg { inset: 0; width: 100%; height: 100%; }
.aro text { font: 700 9.5px var(--body); letter-spacing: 1.6px; fill: #d9d7df; }
.vidrio { overflow: hidden; background: radial-gradient(circle at 50% 50%, #05060a 0 22%, #141a33 34%, #1d1036 48%, #07080d 66%, #2a2a34 74%, #050507 78%); box-shadow: inset 0 0 calc(20 * var(--s)) #000, 0 0 0 calc(2 * var(--s)) #000; }
.vidrio .iris { inset: 26%; border-radius: 50%; background: repeating-conic-gradient(from 10deg, #0a0b11 0 10deg, #161827 10deg 20deg); animation: cam-iris 6s ease-in-out infinite alternate; }
@keyframes cam-iris { from { transform: rotate(0deg) scale(.86); } to { transform: rotate(24deg) scale(1.06); } }
/* Tratamiento antirreflejo: el verde/magenta de los lentes de verdad. */
.vidrio .capa { inset: 0; border-radius: 50%; background: conic-gradient(from 120deg, transparent 0 18%, #3cff9a26 24%, transparent 32%, transparent 58%, #ff4fd626 66%, transparent 76%); }
.vidrio .reflejo { inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffffe6 0 4%, #ffffff40 7%, transparent 12%), radial-gradient(circle at 66% 70%, #ff7ac44d 0 6%, transparent 13%), radial-gradient(ellipse 60% 22% at 40% 20%, #ffffff1f, transparent 70%); }
.disparador { background: radial-gradient(circle at 50% 50%, #9e1027, #6e0717); box-shadow: inset 0 0 0 calc(1 * var(--s)) #3a0410; }
.disparador.tope { background: radial-gradient(circle at 38% 30%, #ffd2da 0 8%, #ff4d6d 30%, #b3122f 72%, #7a0a1c); box-shadow: 0 0 calc(8 * var(--s)) #ff2f6a55; }

.cam-sombra { position: relative; z-index: 3; width: 400px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, #000d, #0006 45%, transparent 75%); opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .cam-sombra { width: 300px; height: 44px; } }
/* El velo del flash (camara.js, luzDe): toda la pantalla, también la franja que deja la barra del iPhone al esconderse (por
   eso va fijo en el body y mide 100lvh), arriba de todo. Un solo color liso, blanco apenas frío como un xenón: el navegador
   lo compone sin textura y solo cambia la opacidad. */
.cam-flashazo { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; z-index: 2147483000; background: #f5f8ff; opacity: 0; pointer-events: none; will-change: opacity; display: none; }

/* ---- Las fotos: polaroids que salen por la ranura (están DETRÁS del cuerpo y se asoman por abajo) y caen al montón. ---- */
.cam-fotos { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1100px; }
.cam-foto { position: absolute; left: 50%; top: 50%; width: var(--fw); margin: 0 0 0 calc(var(--fw) / -2); padding: calc(var(--fw) * .055) calc(var(--fw) * .055) calc(var(--fw) * .2);
  background: linear-gradient(180deg, #faf7f0, #ede8de); border-radius: 3px;
  box-shadow: 0 18px 38px #000c, 0 3px 6px #0008, inset 0 1px 0 #fff; transform-origin: 50% 50%; opacity: 0; pointer-events: auto; cursor: zoom-in; --fw: min(42vw, 230px); will-change: transform, opacity; }
.cam-foto .ph { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #0d0b10; box-shadow: inset 0 0 0 1px #0002; }
.cam-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-foto .rev { position: absolute; inset: 0; background: linear-gradient(160deg, #3b2a3d, #15101a); will-change: opacity; }
.cam-foto .brillo { position: absolute; inset: 0; background: linear-gradient(125deg, #ffffff38 0, transparent 35%); pointer-events: none; }
.cam-foto figcaption { position: absolute; left: 0; right: 0; bottom: calc(var(--fw) * .05); text-align: center; font: italic 600 calc(var(--fw) * .07) var(--body); color: #2a2430; letter-spacing: .02em; }

/* El botón chico de los álbumes, en el medio de la escena (Max, 14/10): la misma estética que Instagram y Cómo llegar,
   pero chiquito, para que no moleste. El de abajo de todo ("Todos los álbumes") sigue igual. */
.cam-album { position: absolute; z-index: 9; justify-self: center; align-self: end; margin-bottom: calc(env(safe-area-inset-bottom) + 22px);
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid #fb8abe; color: #fff;
  background: linear-gradient(120deg, #35132b, #171126); box-shadow: inset 0 0 12px #ff68b51a, 0 0 16px #fa39992b;
  font: 800 10.5px var(--body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; opacity: 0; pointer-events: none; will-change: opacity; }
.cam-album:hover { background: linear-gradient(120deg, #4a1a3b, #221735); }

/* Más fotos: la grilla que sigue después de la cámara, scroll normal. */
.cam-mas { width: min(1180px, 100% - 40px); margin: 0 auto; padding: 10px 0 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 200px), 1fr)); gap: 22px 16px; }
.cam-mas .cam-foto { position: relative; left: auto; top: auto; margin: 0; width: 100%; --fw: 100%; opacity: 0; transform: translate3d(0, 60px, 0) rotate(calc(var(--r, 0deg) * 4)) scale(.9);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), opacity .6s ease var(--d, 0ms); }
.cam-mas .cam-foto.entra { opacity: 1; transform: rotate(var(--r, 0deg)); }
.cam-mas .cam-foto figcaption { font-size: 13px; bottom: 10px; }
/* El lugar de la fiesta, abajo de la fecha y más chico (Max, 15/10). */
.cam-foto figcaption.con-lugar { line-height: 1.08; }
.cam-foto figcaption small { display: block; margin-top: .14em; font-size: .62em; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6d6372; }
.cam-mas .cam-foto figcaption.con-lugar { bottom: 7px; }
.cam-mas .cam-foto figcaption small { font-size: 8.5px; }
/* En el celu las polaroids que escupe la cámara son chicas: ahí el lugar no se lee, va solo la fiesta y la fecha. */
@media (max-width: 700px) { .cam-fotos .cam-foto figcaption small { display: none; } }
.cam-mas .cam-foto .rev { display: none; }
@media (hover: hover) { .cam-mas .cam-foto.entra:hover { transform: rotate(0deg) scale(1.04); transition-delay: 0ms; } }
.cam-todas { text-align: center; margin: 0; padding: 26px 20px 6px; }
.cam-todas .boton { min-height: 52px; padding: 0 30px; border-color: #fb8abe; box-shadow: 0 0 26px #fa39993d; }
.cam-firma { text-align: center; margin: 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 110px); }
.cam-firma small { font: 500 12px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* Con lo legal abajo de la firma, el aire para la barra flotante lo da lo legal (que es lo último). */
.cam-firma.con-legal { padding-bottom: 4px; }
.pie-legal.al-fondo { margin: 0; padding: 0 16px calc(env(safe-area-inset-bottom) + 110px); }

/* Visor de una foto. */
/* Entra entero en el alto de la pantalla (polaroid 1,145 de su ancho + la pista + la botonera): el eje vertical es del
   gesto (foto ↔ reel), no hay nada que scrollear adentro del visor. */
.cam-visor-dlg { border: 0; padding: 0; background: transparent; --fwv: min(92vw, 720px, calc((100vh - 230px) / 1.145)); max-width: var(--fwv); width: 100%;
  touch-action: none; overscroll-behavior: contain; }
@supports (height: 100svh) { .cam-visor-dlg { --fwv: min(92vw, 720px, calc((100svh - 230px) / 1.145)); } }
.cam-visor-dlg::backdrop { background: #000d; }
.cam-visor-dlg.en-reel::backdrop { background: #000e; }
.cam-visor-dlg .cam-foto { position: relative; left: auto; top: auto; margin: 0; opacity: 1; width: 100%; --fw: var(--fwv); cursor: default; will-change: transform, opacity; }
.cam-visor-dlg .cam-foto .rev { display: none; }
.cam-visor-dlg .acc { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .cam { height: auto; }
  .cam-pin { position: relative; height: 80vh; }
  .cam-mas .cam-foto { opacity: 1; transform: none; transition: none; }
  .cam-fotos, .cam-album { opacity: 1; }
  .cam-flashazo, .cam-flare, .cam-fantasma { display: none; }   /* sin flash: nada de destellos para quien pidió menos movimiento */
  .cam-album { pointer-events: auto; }
  .flash-brillo, .led, .vidrio .iris { animation: none; }
}
/* El pie ya no termina la página (sigue la cámara): sin el aire de abajo que dejaba lugar al botón flotante. */
footer { padding-bottom: 12px; }

/* ---- Por dentro de la cámara (se ve mientras se arma; ver camara.js) ---- */
.interno .luz { opacity: .2; }
.chasis { border-radius: calc(12 * var(--s)); background: repeating-linear-gradient(90deg, #ffffff06 0 1px, transparent 1px 4px), linear-gradient(180deg, #2c2b31, #17161b);
  -webkit-mask: radial-gradient(circle at 50% 56%, transparent 0 calc(58 * var(--s)), #000 calc(59 * var(--s))); mask: radial-gradient(circle at 50% 56%, transparent 0 calc(58 * var(--s)), #000 calc(59 * var(--s)));
  box-shadow: inset 0 0 0 calc(3 * var(--s)) #0b0a0e; }
.chasis .nervio { top: calc(14 * var(--s)); bottom: calc(14 * var(--s)); width: calc(8 * var(--s)); border-radius: calc(3 * var(--s)); background: linear-gradient(90deg, #4a4952, #1d1c21); }
.chasis .n1 { left: calc(70 * var(--s)); } .chasis .n2 { right: calc(70 * var(--s)); }
.chasis .perno { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8e6ec, #6a6870 55%, #1a191e); }
.perno.a { left: calc(12 * var(--s)); top: calc(12 * var(--s)); } .perno.b { right: calc(12 * var(--s)); top: calc(12 * var(--s)); }
.perno.c { left: calc(12 * var(--s)); bottom: calc(12 * var(--s)); } .perno.d { right: calc(12 * var(--s)); bottom: calc(12 * var(--s)); }
.film { border-radius: calc(6 * var(--s)); background: linear-gradient(180deg, #121115, #050507); box-shadow: inset 0 0 0 calc(2 * var(--s)) #2b2a31; }
.film .hojas { left: calc(10 * var(--s)); right: calc(10 * var(--s)); top: calc(-5 * var(--s)); height: calc(10 * var(--s)); background: repeating-linear-gradient(180deg, #f2eee6 0 calc(1.2 * var(--s)), #b9b4ab calc(1.2 * var(--s)) calc(2 * var(--s))); border-radius: 2px; }
.film .ventana { left: calc(40 * var(--s)); right: calc(40 * var(--s)); top: calc(22 * var(--s)); height: calc(84 * var(--s)); border-radius: calc(3 * var(--s)); background: linear-gradient(135deg, #1c1a24, #0a090d 60%, #23202b); box-shadow: inset 0 0 0 1px #000; }
.etq-film { left: 0; right: 0; bottom: calc(26 * var(--s)); text-align: center; font: 700 calc(8.5 * var(--s)) var(--body); letter-spacing: .24em; color: #ff8bbd; }
.film .lengueta { left: calc(100 * var(--s)); width: calc(50 * var(--s)); bottom: calc(6 * var(--s)); height: calc(12 * var(--s)); border-radius: calc(3 * var(--s)); background: linear-gradient(180deg, #3a3940, #1b1a1f); }
.espejo { border-radius: calc(4 * var(--s)); background: linear-gradient(160deg, #f4f7fb 0, #9aa3b4 30%, #e3e8f1 46%, #6f7787 70%, #cfd5df 100%); box-shadow: inset 0 0 0 calc(3 * var(--s)) #3c3c44; }
.espejo .refl { inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffffb0 42%, transparent 52%); }
.pcb { border-radius: calc(4 * var(--s)); background: linear-gradient(160deg, #0f5a35, #08391f); box-shadow: inset 0 0 0 calc(1.5 * var(--s)) #0a2a17; }
.pcb .pistas { inset: 0; background:
  repeating-linear-gradient(90deg, transparent 0 calc(9 * var(--s)), #d4b05a55 calc(9 * var(--s)) calc(10 * var(--s))),
  repeating-linear-gradient(0deg, transparent 0 calc(13 * var(--s)), #d4b05a40 calc(13 * var(--s)) calc(14 * var(--s))); opacity: .8; }
.pcb .chip { background: linear-gradient(160deg, #26252b, #0b0b0e); border-radius: calc(1.5 * var(--s)); box-shadow: 0 0 0 calc(1.5 * var(--s)) #b9b7bf55; display: grid; place-items: center; }
.pcb .chip b { font: 700 calc(6 * var(--s)) ui-monospace, monospace; color: #ffffff70; }
.pcb .c1 { left: calc(14 * var(--s)); top: calc(14 * var(--s)); width: calc(34 * var(--s)); height: calc(34 * var(--s)); }
.pcb .c2 { left: calc(62 * var(--s)); top: calc(12 * var(--s)); width: calc(22 * var(--s)); height: calc(14 * var(--s)); }
.pcb .cristal { left: calc(62 * var(--s)); top: calc(34 * var(--s)); width: calc(20 * var(--s)); height: calc(8 * var(--s)); border-radius: calc(4 * var(--s)); background: linear-gradient(180deg, #f3f2f6, #8d8b94); }
.pcb .cond { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #a9b0c0 45%, #3b3f4a); top: calc(52 * var(--s)); }
.k1 { left: calc(14 * var(--s)); } .k2 { left: calc(27 * var(--s)); } .k3 { left: calc(40 * var(--s)); }
.pcb .res { width: calc(10 * var(--s)); height: calc(4 * var(--s)); border-radius: 1px; background: linear-gradient(90deg, #ccc 0 20%, #2a1d12 20% 80%, #ccc 80%); top: calc(56 * var(--s)); }
.r1 { left: calc(60 * var(--s)); } .r2 { left: calc(74 * var(--s)); } .r3 { left: calc(88 * var(--s)); }
.pcb .pines { right: calc(6 * var(--s)); top: calc(10 * var(--s)); width: calc(6 * var(--s)); height: calc(40 * var(--s)); background: repeating-linear-gradient(180deg, #e8c46a 0 calc(3 * var(--s)), transparent calc(3 * var(--s)) calc(5 * var(--s))); }
.pcb .conector { left: calc(14 * var(--s)); bottom: calc(-3 * var(--s)); width: calc(26 * var(--s)); height: calc(7 * var(--s)); background: #f2efe7; border-radius: 1px; }
.pcb .serie { right: calc(8 * var(--s)); bottom: calc(5 * var(--s)); font: 600 calc(5 * var(--s)) var(--body); letter-spacing: .1em; color: #ffffff66; }
.flex { border-radius: calc(3 * var(--s)); background: linear-gradient(90deg, #c2600e, #e9892a 45%, #b5540c); }
.flex .pistas-flex { inset: 0 calc(5 * var(--s)); background: repeating-linear-gradient(90deg, #f3c27a 0 calc(1 * var(--s)), transparent calc(1 * var(--s)) calc(3 * var(--s))); opacity: .7; }
.cil, .resorte { backface-visibility: visible; -webkit-backface-visibility: visible; }
.cil-c, .cil-c i { position: absolute; transform-style: preserve-3d; }
.cil-c { inset: 0; }
.cil-c .tira { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cil-c .tapa-c { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f2f1f5, #8d8b94 55%, #3d3c42); }
.pila .tapa-c { background: radial-gradient(circle, #f6f5f8 0 25%, #a7a5ad 30%, #55545b 70%); }
.capacitor .tapa-c { background: radial-gradient(circle, #cfd2da 0 14%, #252a4a 18%, #12152a); }
.tubo .tira { box-shadow: 0 0 calc(4 * var(--s)) #fff6; }
.motor .tapa-c { background: radial-gradient(circle, #c7c4cc 0 18%, #b06a2d 22%, #6c3c14 70%); }
.rodillo .tapa-c { background: radial-gradient(circle, #d8d6dc 0 30%, #26252b 34%); }
.engranaje { background: radial-gradient(circle, #0c0b0f 0 12%, #c8c6ce 13% 19%, transparent 20%), radial-gradient(circle at 38% 32%, #eceaf0, #8a8892 55%, #4a4950);
  -webkit-mask: radial-gradient(circle closest-side, #000 80%, transparent 81%), repeating-conic-gradient(#000 0 8deg, transparent 8deg 15deg);
  mask: radial-gradient(circle closest-side, #000 80%, transparent 81%), repeating-conic-gradient(#000 0 8deg, transparent 8deg 15deg); }
.engranaje.laton { background: radial-gradient(circle, #0c0b0f 0 12%, #e7d08f 13% 19%, transparent 20%), radial-gradient(circle at 38% 32%, #fff1bf, #c79a3c 55%, #7a5a1c); }
.engranaje.chico { -webkit-mask: radial-gradient(circle closest-side, #000 72%, transparent 73%), repeating-conic-gradient(#000 0 12deg, transparent 12deg 24deg); mask: radial-gradient(circle closest-side, #000 72%, transparent 73%), repeating-conic-gradient(#000 0 12deg, transparent 12deg 24deg); }
.resorte .esp { left: 0; width: 100%; height: calc(30 * var(--s)); top: calc(var(--i) * 4.2 * var(--s)); border-radius: 50%;
  background: radial-gradient(closest-side, transparent 0 74%, #f4f3f7 78%, #8e8c95 88%, #2c2b31 97%, transparent 100%); transform: rotateX(74deg) rotateY(calc(var(--i) * 4deg)); }
.resorte .tapa-r { left: calc(-3 * var(--s)); right: calc(-3 * var(--s)); top: calc(-4 * var(--s)); height: calc(6 * var(--s)); border-radius: calc(3 * var(--s)); background: linear-gradient(180deg, #b9b7c0, #4b4a51); }
.lente-int { background: radial-gradient(circle at 50% 50%, #9fc8ff14 0 55%, #8fb4ff2a 78%, #dfe8ff66 90%, #6a7a9a99 96%, #ffffff40 100%); box-shadow: inset 0 0 0 calc(3 * var(--s)) #d9e2f540, 0 0 0 calc(1.5 * var(--s)) #1a1d2899; }
.lente-int .brillo-c { inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, #ffffffd0 0 5%, transparent 13%), radial-gradient(circle at 68% 72%, #7cffc04d 0 7%, transparent 16%); }
.tornillo-f { background: radial-gradient(circle at 35% 30%, #f1eff4, #77757d 55%, #222126); box-shadow: 0 0 0 calc(1 * var(--s)) #000; }
.tornillo-f::after { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; height: 12%; background: #000a; }

/* ---- La cámara en 3D de verdad (camara3d.js): cuando está, las caras de CSS no se dibujan y queda solo la zona de toque. */
.cam-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; opacity: 0; will-change: opacity; }
.con-gl .cam-3d .cp { display: none; }
.cam-hit { position: absolute; left: 0; top: 0; width: calc(380 * var(--s)); height: calc(300 * var(--s)); margin: calc(-170 * var(--s)) 0 0 calc(-190 * var(--s)); border-radius: calc(30 * var(--s)); }
/* ---- El destello donde está el flash, como lo ve el ojo (camara.js, luzDe). Tres cosas, en el orden en que se apagan:
   - .agujas: las agujas finas e irregulares alrededor de una luz muy fuerte (las pestañas y el cristalino). Duran lo que
     dura el golpe: se van primero.
   - .nucleo: el resplandor, que cae como 1/r² y cubre casi toda la pantalla mientras está fuerte: es lo que hace que,
     cuando el velo baja, el centro siga encandilado y los bordes vuelvan primero (no un gris parejo, que se lee como un
     fundido de video). Se achica a medida que baja (el halo depende del brillo).
   Los hijos no se animan (salvo la opacidad de las agujas, en su propia capa): se pintan una vez y después solo se mueven y
   escalan con el contenedor. Los degradés se agrandan sin perder nada. Sin aro de colores: se leía como un filtro. */
.cam-flare, .cam-fantasma { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 21; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.cam-flare > i, .cam-flare .rayos { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cam-flare .nucleo { width: 520px; height: 520px; margin: -260px 0 0 -260px;
  background: radial-gradient(circle closest-side, #fff 0 2.5%, rgba(255,255,255,.92) 5%, rgba(246,249,255,.72) 9%, rgba(238,244,255,.5) 14%, rgba(228,237,255,.32) 21%, rgba(218,230,255,.19) 30%, rgba(208,222,255,.1) 42%, rgba(200,216,255,.045) 58%, rgba(196,212,255,.016) 78%, transparent); }
.cam-flare .agujas { width: 0; height: 0; border-radius: 0; will-change: opacity; }
.cam-flare .rayos { width: 420px; height: 420px; margin: -210px 0 0 -210px;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 5%, rgba(0,0,0,.55) 16%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.04) 56%, transparent 78%);
  mask-image: radial-gradient(circle closest-side, #000 0 5%, rgba(0,0,0,.55) 16%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.04) 56%, transparent 78%); }
.cam-flare .rayos.cortos {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 4%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.08) 26%, transparent 40%);
  mask-image: radial-gradient(circle closest-side, #000 0 4%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.08) 26%, transparent 40%); }
/* Lo que queda en el ojo, en el mismo lugar de la retina (por eso van juntas y derivan juntas): primero la ventana del flash
   quemada (.quemado: su forma, un rectángulo de puntas redondas apenas más grande que ella, con los bordes comidos; nunca un
   círculo ni un rectángulo grande, que se leen como un sticker) y después la post-imagen, apaisada como la ventana y más
   blanda: clara y cálida (positiva) y después la complementaria del xenón frío, violeta, que se va despacio. Sobre el negro
   de la página una mancha oscura no se vería: es una luz tenue, que sobre algo claro lo tiñe. */
.cam-fantasma { opacity: 1; will-change: transform; }
.cam-fantasma > i { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: opacity; }
.cam-fantasma .quemado { width: 112px; height: 50px; margin: -25px 0 0 -56px; border-radius: 9px; background: #fff;
  box-shadow: 0 0 4px 2px #fff, 0 0 12px 5px rgba(244,248,255,.6), 0 0 26px 9px rgba(226,236,255,.2); }
.cam-fantasma .ai-pos { width: 170px; height: 84px; margin: -42px 0 0 -85px; background: radial-gradient(closest-side, rgba(255,251,230,.8) 0, rgba(250,248,205,.55) 26%, rgba(214,246,190,.24) 56%, rgba(170,236,190,.07) 80%, transparent); }
.cam-fantasma .ai-neg { width: 230px; height: 118px; margin: -59px 0 0 -115px; background: radial-gradient(closest-side, rgba(150,96,255,.46) 0, rgba(172,88,240,.32) 30%, rgba(150,70,215,.14) 60%, rgba(120,60,190,.04) 82%, transparent); }
/* Visor: flechas a los costados de la foto (en el celular se pasa con el dedo y quedan chicas abajo de la foto). */
.cam-visor-dlg { overflow: visible; }
.cam-vflecha { position: absolute; top: calc(min(92vw, 720px) * .5); width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: #0008;
  box-shadow: inset 0 0 0 1px #ffffff2e; cursor: pointer; z-index: 2; }
.cam-vflecha::before { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-65%, -50%) rotate(-45deg); }
.cam-vflecha.ant::before { transform: translate(-35%, -50%) rotate(135deg); }
.cam-vflecha.ant { left: calc(50% - var(--mitad, 360px) - 58px); } .cam-vflecha.sig { right: calc(50% - var(--mitad, 360px) - 58px); }
.cam-vflecha:hover { background: #000c; }
@media (max-width: 860px) { .cam-vflecha.ant { left: calc(50% - var(--mitad, 46vw) + 6px); } .cam-vflecha.sig { right: calc(50% - var(--mitad, 46vw) + 6px); } }
/* El reel, deslizando en vertical desde la foto: en la compu 9:16 centrado al 92% del alto, como Instagram; en el teléfono,
   toda la pantalla. Está fijo (no ocupa lugar en el visor) y lo mueve el gesto con transform. */
.cam-visor-dlg .cam-vflecha { top: var(--medio, calc(min(92vw, 720px) * .5)); z-index: 4; }
.cam-visor-dlg .cam-reel[hidden], .cam-pista[hidden] { display: none; }
.cam-reel { position: fixed; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 92vh; width: calc(92vh * var(--arn, .5625)); max-width: 92vw;
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 90px #000d, 0 0 0 1px #ffffff1c; will-change: transform; }
@supports (height: 100svh) { .cam-reel { height: 92svh; width: calc(92svh * var(--arn, .5625)); } }
@media (max-width: 700px) { .cam-reel { margin: 0; width: auto; height: auto; max-width: none; border-radius: 0; box-shadow: none; } }
.cam-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cam-reel figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; margin: 0; font: 800 13px/1.2 var(--body, system-ui); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 10px #000c; pointer-events: none; }
.cam-reel .sonido, .cam-reel .ig, .cam-reel .cerrar-r { position: absolute; z-index: 2; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #000a; box-shadow: inset 0 0 0 1px #ffffff30; color: #fff; cursor: pointer; }
.cam-reel .sonido { right: 10px; } .cam-reel .ig { right: 60px; } .cam-reel .cerrar-r { left: 10px; }
.cam-reel .cerrar-r::before, .cam-reel .cerrar-r::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.cam-reel .cerrar-r::after { transform: rotate(-45deg); }
@media (max-width: 700px) {
  .cam-reel .sonido, .cam-reel .ig, .cam-reel .cerrar-r { top: calc(env(safe-area-inset-top) + 12px); }
  .cam-reel .cerrar-r { left: calc(env(safe-area-inset-left) + 12px); } .cam-reel .sonido { right: calc(env(safe-area-inset-right) + 12px); } .cam-reel .ig { right: calc(env(safe-area-inset-right) + 62px); }
  .cam-reel figcaption { left: calc(env(safe-area-inset-left) + 18px); bottom: calc(env(safe-area-inset-bottom) + 24px); }
  .cam-visor-dlg.en-reel .cam-vflecha { display: none; }
}
.cam-reel .ui { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.cam-reel .ui > button, .cam-reel .ui > a { pointer-events: auto; }
.cam-visor-dlg .cam-foto .oscuro { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 3px; background: #000; opacity: 0; pointer-events: none; }
/* La apertura, en vertical: el reel sube con la foto adentro, en su cuadrado; arriba y abajo dos cortinas negras que se
   abren (scaleY) hasta el alto del video mientras la foto se disuelve. */
.cam-reel .fantasma { position: absolute; z-index: 1; left: 0; top: 50%; width: 100%; aspect-ratio: 1; margin-top: -50%; object-fit: cover; pointer-events: none; }
.cam-reel .fantasma[hidden] { display: none; }
.cam-reel .cortina { position: absolute; z-index: 1; left: 0; right: 0; height: var(--velo, 0px); background: #000; transform: scaleY(0); pointer-events: none; }
.cam-reel .cortina.a { top: 0; transform-origin: 50% 0; } .cam-reel .cortina.b { bottom: 0; transform-origin: 50% 100%; }
.cam-reel .destello { position: absolute; z-index: 1; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, #ffffff55 45%, #fff9 50%, #ffffff55 55%, transparent); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.cam-visor-dlg.en-reel .acc, .cam-visor-dlg.en-reel .cam-pista { pointer-events: none; }
/* La pista abajo de la foto: deslizando hay un reel. Se toca igual. */
.cam-pista { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #141118f2; color: #fff; font: 700 11.5px/1 var(--body, system-ui); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #ffffff2e, 0 6px 22px #0009; cursor: pointer; }
.cam-pista:hover { background: #221c27f2; }
.cam-pista .a:empty { display: none; }
.cam-pista .flecha { display: inline-block; font: 800 16px/1 system-ui, sans-serif; color: #ff4f8a; }
@media (prefers-reduced-motion: no-preference) {
  .cam-pista .flecha { animation: cam-pista-sube 1.4s ease-in-out infinite; } .cam-pista.abajo .flecha { animation-name: cam-pista-baja; }
}
@keyframes cam-pista-sube { 50% { transform: translate3d(0, -4px, 0); } }
@keyframes cam-pista-baja { 50% { transform: translate3d(0, 4px, 0); } }
.cam-visor-dlg .acc { will-change: opacity; }
.cam-visor-dlg .acc .boton { white-space: nowrap; }
/* Descargar: chiquito, al costado de Cerrar; se toca entero (44 px de alto) aunque se vea mínimo. La grilla deja Ver el
   álbum y Cerrar centrados igual que antes (dos columnas elásticas a los lados); Descargar va en la de la derecha. */
.cam-visor-dlg .acc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; }
.cam-visor-dlg .acc::before { content: ""; }
.cam-visor-dlg .acc .bajar { justify-self: start; }
.cam-visor-dlg .acc .bajar { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 4px 0 6px; color: #fff; opacity: .62;
  font: 600 .66rem/1 var(--display, inherit); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease; }
.cam-visor-dlg .acc .bajar[hidden] { display: none; }
.cam-visor-dlg .acc .bajar:hover, .cam-visor-dlg .acc .bajar:focus-visible { opacity: 1; }
.cam-visor-dlg .acc .bajar svg { flex: none; }
/* En el celular no entra al costado: va abajo, centrado y chiquito. */
@media (max-width: 560px) { .cam-visor-dlg .acc { row-gap: 2px; } .cam-visor-dlg .acc .bajar { grid-column: 1 / -1; justify-self: center; min-height: 36px; } }

/* Invitar a tocar (camara.js): una foto de la grilla se levanta apenas, se ladea y vuelve. Solo transform. */
.cam-mas .cam-foto.cam-llama { animation: cam-llama 2.4s cubic-bezier(.3, .7, .2, 1); }
/* TOUCH ME (Max, 16/10: "que se pongan con un colorcito rosita suave y que diga touch me con la carita guiñando el ojo; el
   nombre se va y después vuelve a la normalidad"). Mientras la foto se levanta: un halo rosa alrededor (solo opacity) y el pie
   cambia por "touch me 😉" (el emoji del sistema: en el iPhone y la Mac es el de Apple). */
.cam-mas .cam-foto::before { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 150, 205, .85), 0 0 34px 8px rgba(255, 105, 180, .5); }
.cam-mas .cam-foto::after { content: 'TOUCH ME! 😉'; position: absolute; left: 50%; bottom: 9px; z-index: 2; pointer-events: none; opacity: 0; white-space: nowrap;
  padding: 6px 11px 5px; border-radius: 999px; background: linear-gradient(180deg, #ff6fb1, #ff3d94); color: #fff;
  font: 800 11.5px/1 var(--body); letter-spacing: .14em; text-shadow: 0 1px 0 rgba(150, 0, 70, .35);
  box-shadow: 0 6px 18px rgba(255, 61, 148, .45), inset 0 1px 0 rgba(255, 255, 255, .45); transform: translateX(-50%); }
@media (max-width: 700px) { .cam-mas .cam-foto::after { font-size: 10.5px; letter-spacing: .1em; padding: 5px 9px 4px; bottom: 8px; } }
.cam-mas .cam-foto.cam-llama::before { animation: cam-halo 2.4s ease both; }
.cam-mas .cam-foto.cam-llama::after { animation: cam-touch 2.4s cubic-bezier(.2, .8, .2, 1) both; }
.cam-mas .cam-foto.cam-llama figcaption { animation: cam-pie-sale 2.4s ease both; }
@keyframes cam-halo { 0%, 6% { opacity: 0; } 24%, 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cam-touch { 0%, 14% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.9); } 24% { opacity: 1; transform: translateX(-50%) scale(1.06); } 30%, 78% { opacity: 1; transform: translateX(-50%); } 92%, 100% { opacity: 0; transform: translateX(-50%) translateY(-3px); } }
@keyframes cam-pie-sale { 0%, 8% { opacity: 1; } 18%, 82% { opacity: 0; } 96%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cam-mas .cam-foto.cam-llama::before, .cam-mas .cam-foto.cam-llama::after, .cam-mas .cam-foto.cam-llama figcaption { animation: none; } }
@keyframes cam-llama { 0%, 100% { transform: rotate(var(--r, 0deg)); } 28% { transform: translateY(-9px) rotate(calc(var(--r, 0deg) - 2.4deg)) scale(1.035); } 52% { transform: translateY(-3px) rotate(calc(var(--r, 0deg) + 1.2deg)) scale(1.012); } 74% { transform: rotate(calc(var(--r, 0deg) - .4deg)); } }
/* "Deslizá" al costado del reel: una línea con un punto que sube y la palabra en vertical, casi transparente. */
.cam-desliza-reel { position: fixed; right: max(12px, env(safe-area-inset-right)); top: 50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; opacity: 0; transform: translate(8px, -50%); transition: opacity .6s ease, transform .6s ease; pointer-events: none; font: 600 10px/1 system-ui, -apple-system, sans-serif; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 1px 6px #000b; }
.cam-desliza-reel span { writing-mode: vertical-rl; transform: rotate(180deg); }
.cam-desliza-reel i { position: relative; width: 2px; height: 36px; border-radius: 2px; background: linear-gradient(#fff0, #fffb); }
.cam-desliza-reel i::after { content: ""; position: absolute; left: -2px; bottom: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: cam-sube 1.9s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes cam-sube { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-32px); opacity: 0; } }
.cam-visor-dlg.en-reel.muestra-desliza .cam-desliza-reel { opacity: .78; transform: translate(0, -50%); transition-delay: 1s; }
/* En la compu el reel tiene flechas a los costados: ahí el aviso sobra. */
@media (min-width: 701px) { .cam-desliza-reel { display: none; } }
@media (prefers-reduced-motion: reduce) { .cam-mas .cam-foto.cam-llama, .cam-desliza-reel i::after { animation: none; } }
/* Un scroll fuerte no cruza la grilla de una (informe del rompedor, 16/10): la primera fila es un tope del imán que frena
   siempre (stop: always), con un poco de aire arriba; desde ahí se sigue bajando normal. */
html.cx-snap-on .cam-mas { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 24px; }

/* "Hay más abajo" al cerrar el visor (camara.js, pistaMas): una píldora mínima de vidrio con una flechita que respira. */
.cam-pista-mas { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 26px); z-index: 30; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 15px;
  border-radius: 999px; background: rgba(18, 13, 20, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .4);
  color: rgba(255, 255, 255, .86); font: 600 10.5px/1 var(--body, system-ui); letter-spacing: .22em; text-transform: uppercase; pointer-events: none;
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.cam-pista-mas.ve { opacity: 1; transform: translate(-50%, 0); }
.cam-pista-mas i { width: 7px; height: 7px; margin-top: -4px; border-right: 1.6px solid #ff7cbc; border-bottom: 1.6px solid #ff7cbc; transform: rotate(45deg); animation: cam-pista-flecha 1.4s ease-in-out infinite; }
@keyframes cam-pista-flecha { 50% { transform: translateY(3px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .cam-pista-mas i { animation: none; } }