/* Fotos Express · ronda 3: la visión de la app (su gris, su cian, su letra) con la app real y material real.
   Va después de base.css y oscuro.css. Reglas del estudio: sin antetítulos en cada bloque, sin palabras en color,
   sin filas de cifras, sin rejillas de tarjetas, un solo movimiento memorable por página. */
body.real {
  --papel: #0d0d0e;
  --placa: #18181a;
  --placa-2: #1f1f21;
  --placa-3: #29292c;
  --tinta: #ececee;
  --suave: #a4a4aa;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #0d0d0e;
}
body.real .barra-local { background: rgba(13, 13, 14, .92); }
body.real main { overflow-x: clip; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; color: var(--suave); }
.r-titulo { font-size: clamp(40px, 6.2vw, 86px); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.r-h2 { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.r-h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.r-texto { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--suave); margin: 12px 0 0; max-width: 32em; text-wrap: pretty; }
.r-texto strong { color: var(--tinta); font-weight: 600; }
.r-acciones { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 20px; }

/* aparatos con la app real dentro */
.d-cel { --w: 280px; width: var(--w); max-width: 100%; aspect-ratio: 390 / 844; padding: calc(var(--w) * .028); border-radius: calc(var(--w) * .14); background: #2b2b2e; box-shadow: 0 0 0 1px #3c3c40 inset, 0 30px 70px -30px rgba(0, 0, 0, .9); flex: none; }
.d-cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * .115); display: block; }
.d-tab { --w: 640px; width: var(--w); max-width: 100%; aspect-ratio: 1180 / 820; padding: calc(var(--w) * .022); border-radius: calc(var(--w) * .04); background: #2b2b2e; box-shadow: 0 0 0 1px #3c3c40 inset, 0 30px 70px -30px rgba(0, 0, 0, .9); flex: none; }
.d-tab img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * .022); display: block; }
.d-lap { --w: 760px; width: var(--w); max-width: 100%; flex: none; }
.d-lap .pantalla-l { aspect-ratio: 1440 / 900; padding: calc(var(--w) * .018) calc(var(--w) * .018) calc(var(--w) * .024); border-radius: calc(var(--w) * .022) calc(var(--w) * .022) 0 0; background: #1c1c1e; box-shadow: 0 0 0 1px #34343a inset; }
.d-lap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 3px; }
.d-lap .base { height: calc(var(--w) * .026); margin: 0 -6%; border-radius: 0 0 calc(var(--w) * .02) calc(var(--w) * .02); background: #2c2c30; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95); }

/* fotos reales a sangre o con su pie */
.foto-real { margin: 0; position: relative; overflow: hidden; background: #000; }
.foto-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pie-foto { margin: 8px 0 0; }

/* la frase del 0%: una línea grande, sin caja */
.cero-frase { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; margin: 0; max-width: 18em; text-wrap: balance; }
.cero-frase span { color: var(--suave); font-weight: 500; }

/* planes en la escena clara, sin antetítulo */
body.real .escenario-claro { border-radius: 14px; }

/* firma */
.firma-casa { display: flex; align-items: center; gap: 12px; padding: 28px 0 0; color: var(--suave); font-size: 15px; }
.firma-casa img { width: 46px; }

/* espacio para el contenido que falta grabar con la app (no es una foto) */
.toma-pendiente { margin: 0; border-radius: 6px; background: repeating-linear-gradient(0deg, #161618 0 100%); box-shadow: 0 0 0 1px #2e2e32 inset; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px; flex: none; }
.toma-pendiente .mono { color: var(--acento); }
.toma-pendiente b { font-size: 16px; font-weight: 500; line-height: 1.35; color: #d6d6da; max-width: 22em; }

/* antes y después que se arrastra (fotos reales del editor) */
.ad { --x: 50%; position: relative; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: 1440 / 1922; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.ad-despues { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.ad-linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -50% 0; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); pointer-events: none; }
.ad-mango { position: absolute; top: 88%; left: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); transition: scale .15s; }
.ad-mango::before, .ad-mango::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: solid #1d1d1f; border-width: 0 0 2px 2px; translate: 0 -50%; }
.ad-mango::before { left: 11px; rotate: 45deg; }
.ad-mango::after { right: 11px; rotate: -135deg; }
.ad.activo .ad-mango { scale: 1.08; }
.ad-rotulo { position: absolute; top: 12px; z-index: 2; min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 7px; background: rgba(0, 0, 0, .58); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; pointer-events: none; transition: opacity .2s; }
.ad-rotulo.izq { left: 12px; }
.ad-rotulo.der { right: 12px; }
.ad.cerca-izq .ad-rotulo.izq, .ad.cerca-der .ad-rotulo.der { opacity: 0; }
.ad-teclado { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ad:has(.ad-teclado:focus-visible) { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ad-mango, .ad-rotulo { transition: none; } }

/* fondo de luz fractal (comun/fondo.js): detrás de todo, quieto para el puntero */
.fondo-luz { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: -1; pointer-events: none; display: block; }
.fondo-luz.sin-gl { background: radial-gradient(60% 50% at 75% 30%, rgba(123, 183, 212, .14), transparent 70%), radial-gradient(50% 40% at 20% 75%, rgba(145, 123, 190, .12), transparent 70%), #0d0d0e; }