/* Arte aumentado — realidad aumentada. Mismo lenguaje que el sitio. */
@font-face { font-family: "Cormorant"; src: url("/fuentes/cormorant-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fuentes/cormorant-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fuentes/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --muro: #0d0c0b; --muro-2: #151311; --tinta: #f3efe8; --tinta-2: #c9c2b6; --tinta-3: #948d82;
  --borde: rgba(243, 239, 232, 0.12); --borde-fuerte: rgba(243, 239, 232, 0.28);
  --vivo: #e66767; --oro: #b8996a; --lateral: clamp(16px, 5vw, 64px);
  --serif: "Cormorant", Georgia, serif; --sans: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--muro); color: var(--tinta); font-family: var(--sans); }
body { min-height: 100dvh; }

.viva {
  min-height: 100dvh; display: grid; gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(24px, 5vh, 56px) var(--lateral);
  max-width: 1280px; margin: 0 auto;
}
@media (min-width: 900px) { .viva { grid-template-columns: auto minmax(320px, 1fr); } }
/* Las obras horizontales no pueden ir tan altas como la pantalla: quedaban más anchas
   que la página y el texto se aplastaba en una columna de una palabra por línea. Van
   con el ancho de su columna, y en el celular, a todo el ancho. */
@media (min-width: 900px) { .obra-horizontal .viva { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); } }
.obra-horizontal .viva__obra { min-width: 0; width: 100%; }
.obra-horizontal .marco img { width: 100%; height: auto; max-height: 74dvh; object-fit: contain; }

/* La obra: en la compu, tan alta como entre, para que el celular la tome bien */
.viva__obra { margin: 0; justify-self: center; opacity: 0; transition: opacity 0.4s; }
.viva__obra.lista { opacity: 1; }   /* cuando ya cargó la obra pedida */
.marco {
  padding: clamp(8px, 1.2vw, 14px); border-radius: 2px;
  background: linear-gradient(150deg, #2b251f 0%, #16130f 45%, #221d18 100%);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
}
.marco img { display: block; height: min(78dvh, 900px); width: auto; max-width: 100%; }
.cartela { margin-top: 14px; padding-left: 14px; border-left: 1px solid var(--oro); display: grid; gap: 2px; font-size: 13px; color: var(--tinta-3); }
.cartela__autor { color: var(--tinta-2); font-weight: 500; }
.cartela__titulo { font-family: var(--serif); font-size: 19px; color: var(--tinta); }

.antetitulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); }
.latido { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px rgba(230, 103, 103, 0.2); }
h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; margin: 18px 0 0; }
h1 em { font-style: italic; font-weight: 400; color: var(--tinta-2); }
.viva__texto p:not(.antetitulo) { color: var(--tinta-2); font-size: 18px; line-height: 1.55; max-width: 30em; }
.nota { font-size: 14px !important; color: var(--tinta-3) !important; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  border: 1px solid var(--tinta); border-radius: 999px; background: var(--tinta); color: var(--muro);
  font: 500 16px var(--sans); cursor: pointer;
}
.boton:disabled { opacity: 0.6; cursor: progress; }
.enlace-ir { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--borde-fuerte); padding: 4px 0; }
.enlace-ir::after { content: " →"; }
.viva__lamina { margin-top: 28px; }

.qr { display: inline-grid; gap: 10px; justify-items: center; margin-top: 10px; padding: 16px; border: 1px solid var(--borde); border-radius: 10px; }
.qr__codigo { width: 180px; height: 180px; padding: 8px; border-radius: 4px; background: var(--tinta); }
.qr__codigo svg { display: block; width: 100%; height: 100%; }
.qr span { font-size: 13px; color: var(--tinta-3); }

/* Qué se ve en cada aparato: en la compu se le apunta; en el celular se apunta */
.solo-celu { display: none; }
@media (pointer: coarse) and (max-width: 1024px) {
  .solo-compu { display: none; }
  .solo-celu { display: block; }
  .viva__obra .marco img { height: auto; width: min(60vw, 280px); }
  .obra-horizontal .viva__obra .marco img { width: 100%; }
}

/* ---- La cámara ---- */
.camara { position: fixed; inset: 0; z-index: 10; background: #000; }
.camara[hidden] { display: none; }
.camara__lienzo { position: absolute; inset: 0; overflow: hidden; }
.camara__lienzo video, .camara__lienzo canvas { position: absolute; }
.camara__aviso {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(13, 12, 11, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 15px; color: var(--tinta); transition: opacity 0.3s;
}
.camara__aviso[data-estado="viva"] { opacity: 0; }
/* «Obra real» / «Viva»: la pastilla aparece cuando reconoce la obra */
.camara__modo {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2;
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--borde-fuerte);
  background: rgba(13, 12, 11, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.camara__modo[hidden] { display: none; }
.camara__modo button {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
  color: var(--tinta); font: 500 15px/1 var(--sans); white-space: nowrap; cursor: pointer;
}
.camara__modo button[aria-pressed="true"] { background: var(--tinta); color: var(--muro); }
/* Celular de costado con la rotación bloqueada (ver acomodar() en el JS): la pastilla y el
   aviso van al borde que para la persona es «abajo», con el texto derecho. */
.camara--giro-90 .camara__modo, .camara--giro-90 .camara__aviso {
  left: calc(max(28px, env(safe-area-inset-left)) + 26px); bottom: auto; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.camara--giro-270 .camara__modo, .camara--giro-270 .camara__aviso {
  left: calc(100% - max(28px, env(safe-area-inset-right)) - 26px); bottom: auto; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.camara__salir {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-fuerte);
  background: rgba(13, 12, 11, 0.72); color: var(--tinta); font-size: 18px; cursor: pointer;
}

.viva__galeria { margin-top: 12px; }

/* El sello de la tecnología: DLA es cliente de MAIC Solutions (decidido el 2026-10-06) */
.powered { grid-column: 1 / -1; margin: 0; font-size: 12px; letter-spacing: 0.06em; color: var(--tinta-3); }
.powered a { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--borde-fuerte); }
.powered a:hover { color: var(--tinta); }
.viva__powered { margin-top: 36px; order: 9; }

/* El logo de MAIC debajo de «Ver la galería», como lo pidió Dani */
.sello-maic { display: inline-flex; flex-direction: column; gap: 8px; margin-top: 36px; text-decoration: none;
              color: var(--tinta-3); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.sello-maic img { display: block; width: 124px; height: auto; }
.sello-maic:hover { opacity: 1; }