/* Casa de la Familia 2.20 · modo marco digital. No afecta a la galería ni a otras páginas. */
#photo-frame-v220 {
  margin: 0 0 16px;
  padding: 19px 21px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(230,238,229,.7), rgba(246,245,236,.98));
  border: 1px solid rgba(95,122,106,.18);
}
.photo-frame-v220-intro { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.photo-frame-v220-title { display:flex; align-items:flex-start; gap:12px; }
.photo-frame-v220-title h2 { margin:0; font-size:19px; font-weight:650; line-height:1.25; color:#243b30; }
.photo-frame-v220-title p { margin:4px 0 0; font-size:13px; color:#64766a; line-height:1.45; }
.photo-frame-v220-icon { background:#dce9dd; color:#3d6150; border-radius:11px; width:36px; height:36px; flex:none; display:grid; place-items:center; font-size:24px; }
.photo-frame-v220-count { padding:5px 8px; border-radius:99px; font-size:11px; color:#50665a; background:#e1eade; white-space:nowrap; }
.photo-frame-v220-fields { display:flex; align-items:end; flex-wrap:wrap; gap:12px 15px; }
.photo-frame-v220-field { display:flex; flex-direction:column; gap:6px; color:#53665c; font-size:12px; font-weight:600; flex:1 1 150px; }
.photo-frame-v220-field select { min-height:40px; padding:8px 10px; box-sizing:border-box; width:100%; max-width:290px; font-size:14px; }
.photo-frame-v220-awake { display:flex; flex:1 1 215px; gap:9px; align-items:center; cursor:pointer; font-size:12px; line-height:1.3; color:#42594c; padding-bottom:8px; }
.photo-frame-v220-awake input { width:17px; height:17px; accent-color:#476b53; flex:none; }
.photo-frame-v220-awake small { color:#7b887f; font-size:10px; display:block; font-weight:400; margin-top:2px; }
.photo-frame-v220-start { min-height:41px; white-space:nowrap; }
.photo-frame-v220-status { margin:9px 0 0; color:#65796b; font-size:12px; min-height:0; }
.photo-frame-v220-status:empty { display:none; }
.photo-frame-v220-status.warning { color:#a23a2b; }
@media(max-width:600px) {
 #photo-frame-v220 { padding:15px; }
 .photo-frame-v220-intro { flex-wrap:wrap; gap:8px; }
 .photo-frame-v220-title h2 { font-size:17px; }
 .photo-frame-v220-count { margin-left:48px; }
 .photo-frame-v220-field { min-width:110px; }
 .photo-frame-v220-start { width:100%; }
}
body.photo-frame-v220-open { overflow:hidden !important; }
.photo-frame-v220-overlay,
.photo-frame-v220-overlay:fullscreen {
  position:fixed; inset:0; z-index:2147483647;
  background:#000; color:#fff;
  width:100%; height:100%; height:100dvh;
  box-sizing:border-box; overflow:hidden;
  touch-action:manipulation;
}
.photo-frame-v220-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#000; opacity:.76; transition:opacity .45s ease; user-select:none; -webkit-user-drag:none; }
.photo-frame-v220-image.photo-frame-v220-visible { opacity:1; }
.photo-frame-v220-toolbar { display:flex; align-items:center; gap:16px; position:absolute; top:0; right:0; left:0; padding:calc(10px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 14px calc(16px + env(safe-area-inset-left,0px)); background:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,.35),transparent); opacity:0; transform:translateY(-8px); transition:opacity .2s, transform .2s; pointer-events:none; }
.photo-frame-v220-controls-visible .photo-frame-v220-toolbar { opacity:1; transform:none; pointer-events:auto; }
.photo-frame-v220-caption { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:43vw; }
.photo-frame-v220-counter { font-size:12px; color:#e2e2e2; white-space:nowrap; }
.photo-frame-v220-buttons { display:flex; align-items:center; gap:8px; margin-left:auto; }
.photo-frame-v220-buttons button { color:#fff; font-size:14px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.38); border-radius:12px; min-height:42px; padding:7px 13px; cursor:pointer; }
.photo-frame-v220-buttons button[data-frame-v220="prev"],
.photo-frame-v220-buttons button[data-frame-v220="next"] { font-size:26px; line-height:1; min-width:44px; }
.photo-frame-v220-buttons button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.photo-frame-v220-buttons .photo-frame-v220-exit { background:rgba(123,33,33,.76); }
.photo-frame-v220-bottom { position:absolute; bottom:calc(12px + env(safe-area-inset-bottom,0px)); left:16px; right:16px; font-size:11px; color:#e5e5e5; text-align:center; opacity:0; transition:opacity .2s; pointer-events:none; text-shadow:0 1px 4px #000; }
.photo-frame-v220-controls-visible .photo-frame-v220-bottom { opacity:1; }
.photo-frame-v220-help { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.55); border-radius:999px; padding:9px 15px; font-size:12px; text-align:center; opacity:0; transition:opacity .3s; pointer-events:none; }
.photo-frame-v220-controls-visible .photo-frame-v220-help { opacity:.8; }
@media(max-width:690px) {
 .photo-frame-v220-toolbar { flex-wrap:wrap; gap:6px 10px; justify-content:center; }
 .photo-frame-v220-caption { max-width:55vw; }
 .photo-frame-v220-buttons { width:100%; justify-content:center; margin-left:0; }
 .photo-frame-v220-buttons button { min-height:39px; }
}
@media(prefers-reduced-motion:reduce) {
 .photo-frame-v220-image,.photo-frame-v220-toolbar,.photo-frame-v220-bottom,.photo-frame-v220-help { transition:none; }
}