/* Shared with the robes in the 3D scene through content.js. */
:root{
  --rey-rojo:#a7444c;
  --rey-dorado:#c29b39;
  --rey-azul:#4c6691;
  --rey-rojo-suave:#dcb2b1;
  --rey-dorado-luz:#e3bf68;
  --rey-azul-suave:#b9c9e4;
}
.hero-copy h1 em{color:var(--rey-dorado-luz)}
.hero-actions .primary-btn,.simple-intro .primary-btn{
  background:var(--rey-rojo);color:#fff5e9;
  box-shadow:0 8px 25px #552c3638,inset 0 1px 0 #ffffff1f;
}
.hero-actions .primary-btn:hover,.simple-intro .primary-btn:hover{background:#963c44;box-shadow:0 12px 28px #552c364d}
.donate-btn{background:var(--rey-dorado);color:#172e2e;box-shadow:inset 0 1px 0 #ffffff33}
.donate-btn:hover{background:#d5af54}
.desktop-nav a[data-section=fundacion]::after{background:var(--rey-rojo-suave)}
.desktop-nav a[data-section=musica]::after{background:var(--rey-azul-suave)}
.desktop-nav a[data-section=transparencia]::after{background:var(--rey-dorado-luz)}
.desktop-nav a:hover{color:var(--cream)}
.simple-mode .desktop-nav a:hover{color:var(--ink)}
.tiny-star,.small-star{color:var(--rey-dorado-luz)}
/* Use the supplied complete lockups against the header's actual background. */
.site-header{padding-top:9px;padding-bottom:9px}
.brand{display:grid;place-items:center;gap:0;line-height:0}
.brand-logo{display:block;width:auto;height:92px;object-fit:contain}
.brand-logo--light{display:none}
.simple-mode .brand-logo--dark{display:none}
.simple-mode .brand-logo--light{display:block}
@media(max-width:640px){
  .site-header{padding-top:8px;padding-bottom:8px}
  .brand-logo{height:70px}
}
@media(max-width:360px){
  .site-header{padding-left:18px;padding-right:18px}
  .brand-logo{height:60px}
}
@media(max-height:720px) and (min-width:641px){
  .site-header{padding-top:8px;padding-bottom:8px}
  .brand-logo{height:70px}
}
.tip-dot{background:var(--rey-dorado-luz);box-shadow:0 0 0 4px #c29b3920}
.explore-btn{border-bottom-color:#b9c9e475}
.explore-btn:hover{color:var(--rey-azul-suave)}

[data-tone=rojo]{--section-color:var(--rey-rojo);--section-ink:#fff5e9;--section-number:var(--rey-rojo)}
[data-tone=dorado]{--section-color:var(--rey-dorado);--section-ink:#172e2e;--section-number:#806025}
[data-tone=azul]{--section-color:var(--rey-azul);--section-ink:#fff5e9;--section-number:var(--rey-azul)}
.room-link[data-tone] .room-number{color:var(--section-number)}
.room-link[data-tone]:hover{background:color-mix(in srgb,var(--section-color) 7%,transparent)}
.content-dialog[data-tone] .dialog-action,.simple-section[data-tone] .dialog-action{background:var(--section-color);color:var(--section-ink)}
.content-dialog[data-tone] .dialog-action:hover,.simple-section[data-tone] .dialog-action:hover{filter:brightness(.93)}
.content-dialog[data-tone] #dialog-body h2 em{color:var(--section-number)}
.mini-player>button:first-child{color:var(--rey-azul)}
.equalizer i:nth-child(3n+1){background:var(--rey-rojo)}
.equalizer i:nth-child(3n+2){background:var(--rey-dorado)}
.equalizer i:nth-child(3n){background:var(--rey-azul)}

/* Projection, floating and pointer response live on separate layers. */
.hotspot{
  display:block;padding:8px;border:0;border-radius:30px;background:transparent;
  backdrop-filter:none;gap:0;line-height:1.2;font-size:11px;
  transform:translate(-50%,-50%);transition:opacity .25s;will-change:left,top;
  --float-period:4.8s;--float-delay:0s;--float-lift:8px;
  --magnet-x:0px;--magnet-y:0px;--hotspot-scale:1;
  --badge-bg:var(--section-color,var(--rey-azul));
  --badge-ink:var(--section-ink,#fff5e9);
}
.hotspot:hover{background:transparent}
.hotspot::after{
  content:'';position:absolute;left:23%;right:23%;bottom:0;height:7px;
  border-radius:50%;background:#102d2d5c;filter:blur(5px);pointer-events:none;
  animation:casita-float-shadow var(--float-period) ease-in-out var(--float-delay) infinite;
}
.hotspot-float{
  position:relative;display:block;z-index:1;transform-origin:50% 75%;
  animation:casita-float var(--float-period) cubic-bezier(.45,0,.55,1) var(--float-delay) infinite;
  will-change:transform;
}
.hotspot-surface{
  position:relative;display:flex;align-items:center;gap:9px;min-height:39px;
  padding:7px 15px 7px 7px;border-radius:24px;
  background:var(--badge-bg);color:var(--badge-ink);border:1px solid #f9dfb566;
  box-shadow:0 6px 12px #102b2b3d,0 13px 26px #102b2b29,inset 0 1px 0 #ffffff25;
  transform:translate3d(var(--magnet-x),var(--magnet-y),0) scale(var(--hotspot-scale));
  transition:transform .42s cubic-bezier(.2,.8,.2,1.15),box-shadow .3s,border-color .3s;
}
.hotspot .hotspot-ring{
  width:23px;height:23px;font-size:15px;flex-shrink:0;
  background:#f1d69a;color:#65393b;border:1px solid #fff3c32e;
  box-shadow:inset 0 1px 0 #ffffff3d;
}
.hotspot[data-tone=dorado] .hotspot-ring{background:#fff0c5;color:#4b492c}
.hotspot[data-tone=azul] .hotspot-ring{background:#f1d69a;color:#344766}
.hotspot .hotspot-label{padding:0 1px;letter-spacing:.1px}
.hotspot:hover,.hotspot:focus-visible{--hotspot-scale:1.055}
.hotspot:hover .hotspot-float,.hotspot:focus-visible .hotspot-float,
.hotspot:hover::after,.hotspot:focus-visible::after{animation-play-state:paused}
.hotspot:hover .hotspot-surface,.hotspot:focus-visible .hotspot-surface{border-color:#fff0bbd9;box-shadow:0 8px 17px #102b2b48,0 17px 32px #102b2b33,inset 0 1px 0 #ffffff33}
.hotspot:active{--hotspot-scale:.97}
.hotspot:focus-visible{outline:2px solid #fff0c4;outline-offset:2px}
.hotspot[data-kind=bell] .hotspot-ring{font-size:18px}
.hotspot[data-kind=king]{font-size:11px;min-width:68px;min-height:44px;padding:6px 4px;--float-lift:4px}
.hotspot[data-kind=king] .hotspot-surface{justify-content:center;min-height:32px;padding:7px 9px;gap:0;box-shadow:0 4px 12px #102b2b45,inset 0 1px 0 #ffffff25}
.hotspot[data-kind=king]::before{content:'';position:absolute;left:50%;top:calc(50% + 17px);height:var(--leader-height,0px);width:1px;background:linear-gradient(#f4dfb2aa,#f4dfb244);pointer-events:none}
.hotspot[data-kind=king]::after{display:none}
/* Names and topic icons are painted onto the 3D woodwork. This button follows the
   projected door face, including the perspective of the two side doors. */
.door-target{
  position:absolute;display:block;padding:0;border:0;border-radius:0;
  background:transparent;backdrop-filter:none;pointer-events:auto;cursor:pointer;
  transform:none;outline:none;will-change:left,top,width,height;
}
.door-focus{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.door-focus polygon{fill:#fff1c615;stroke:#fff3cb;stroke-width:3;stroke-linejoin:round}
.door-target:focus-visible .door-focus{opacity:1}

/* These pages are children of room 07, in the map and both content views. */
.room-children{list-style:none;margin:0;padding:3px 0 11px 44px;border-bottom:1px solid #213f3820}
.room-children a{display:flex;align-items:center;gap:13px;padding:12px 7px;color:var(--ink);font-size:12px;border-radius:3px}
.room-children a:hover,.room-children a:focus-visible{background:color-mix(in srgb,var(--section-color) 10%,transparent)}
.room-children a>span:first-child{font-size:9px;color:var(--section-number);font-variant-numeric:tabular-nums}
.people-cards{display:grid;gap:10px;margin:25px 0}
.people-card{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--section-color) 28%,transparent);border-radius:5px;background:color-mix(in srgb,var(--section-color) 5%,transparent);color:var(--ink);transition:background .2s,transform .2s}
.people-card:hover,.people-card:focus-visible{background:color-mix(in srgb,var(--section-color) 11%,transparent);transform:translateX(3px)}
.people-card-crown{display:grid;place-items:center;flex-shrink:0;width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--section-color) 13%,transparent);color:var(--section-number)}
.people-card-crown svg{width:39px;height:34px}
.people-card small{display:block;font-size:7px;letter-spacing:1.2px;color:var(--section-number);line-height:1.7}
.people-card strong{display:block;font:500 29px/1.2 var(--serif);margin:3px 0;color:var(--section-number)}
.people-card>span:last-child>span{display:flex;align-items:center;gap:10px;font-size:9px;color:#5c705c}
.people-card>span:last-child>span svg{width:14px;height:14px}
.people-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-right:18px;margin:4px 0 24px;font-size:9px;line-height:1.7;color:#67765e}
.people-breadcrumb button{background:transparent;color:var(--section-number);padding:4px 0;border-bottom:1px solid currentColor;text-align:left}
.king-profile-hero{position:relative;padding:27px 25px 25px;border:1px solid color-mix(in srgb,var(--section-color) 25%,transparent);border-radius:5px;overflow:hidden;background:linear-gradient(125deg,color-mix(in srgb,var(--section-color) 11%,var(--cream)),var(--cream))}
.king-profile-crown{position:absolute;right:15px;top:26px;width:100px;height:87px;color:var(--section-number);opacity:.33;transform:rotate(10deg)}
.king-profile-crown svg{width:100%;height:100%}
#dialog-body .king-profile-hero .eyebrow{position:relative;color:var(--section-number);font-size:7px}
#dialog-body .king-profile-hero h2{position:relative;margin:16px 0 22px}
.king-profile-instrument{display:flex;align-items:center;gap:8px;font-size:9px;color:#5c705c}
.king-profile-instrument svg{width:14px;height:14px}
.people-siblings{display:flex;flex-wrap:wrap;gap:8px}
.people-siblings a,.people-siblings>span{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 13px;border:1px solid #294b382b;border-radius:22px;font-size:10px;color:#5c705c}
.people-siblings>span{background:var(--section-color);border-color:var(--section-color);color:var(--section-ink)}
.people-siblings a:hover{background:#294b3810}
.people-siblings svg{width:13px;height:13px}
.people-back{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--section-number);line-height:1.6;text-align:left}
.people-back svg{width:14px;height:14px;flex-shrink:0}
.simple-section .people-cards{margin-top:20px}
#dialog-body .content-heading{font:500 29px/1.12 var(--serif);margin:28px 0 12px;color:var(--ink)}
.content-quote{margin:24px 0;padding:8px 0 8px 18px;border-left:2px solid var(--section-number,var(--gold-dark));font:500 24px/1.35 var(--serif);color:#466048}
.content-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.content-facts>div{padding:17px 14px;border:1px solid #294b3826;border-radius:4px;background:#294b3806}
.content-facts dt{font-size:9px;line-height:1.6;color:#5c705c}
.content-facts dd{margin:9px 0 0;font:500 31px/1.1 var(--serif);color:var(--section-number,var(--ink))}
.content-facts dd small{display:block;margin-top:8px;font:400 10px/1.6 var(--sans);color:#5c705c}
.content-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:10.5px;line-height:1.7;color:#5c705c}
.content-table caption{text-align:left;padding:0 0 10px;font-size:9px;color:#5c705c}
.content-table th,.content-table td{padding:11px 4px;text-align:left;vertical-align:top;border-bottom:1px solid #294b3826}
.content-table thead th{font-size:9px;font-weight:500;color:var(--ink)}
.content-table thead th:first-child{width:46%}
.content-table tbody th{font-weight:500;color:var(--ink)}
.profile-monogram{flex-shrink:0}
.profile>div:last-child{min-width:0;flex:1}
.profile h3{line-height:1.15}
.profile a,.content-contact-links a,.content-address a,.dialog-note a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.content-contact-links{display:grid;gap:10px;font-size:12px;line-height:1.8}
.content-address{font-size:12px;line-height:1.9;font-style:normal;color:#5c705c;margin:16px 0}
@keyframes casita-float{
  0%,100%{transform:translate3d(-1px,0,0) rotate(-.55deg)}
  50%{transform:translate3d(2px,calc(var(--float-lift) * -1),0) rotate(.55deg)}
}
@keyframes casita-float-shadow{
  0%,100%{opacity:.75;transform:scaleX(.82)}
  50%{opacity:.35;transform:scaleX(1.12)}
}
@media(max-width:640px){
  .hotspot{font-size:10px;padding:8px;--float-lift:6px}
  .hotspot-surface{min-height:37px;gap:7px;padding:6px 12px 6px 6px}
  .hotspot .hotspot-ring{width:22px;height:22px}
  .hotspot[data-kind=king]{font-size:10px;min-width:62px;padding:6px 4px}
  .hotspot[data-kind=king] .hotspot-surface{padding:7px 10px;min-height:32px}
  .king-profile-hero{padding:24px 19px}
  .king-profile-crown{right:8px;width:83px}
  .people-card{padding:14px;gap:15px}
  .content-facts{grid-template-columns:1fr}
  .profile h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .hotspot-float,.hotspot::after{animation:none!important}
  .hotspot-surface{transition:none;transform:none!important}
}