/* MDV Miami — shared stylesheet.
   Generated by tools/build.mjs from the original per-page <style> blocks,
   which had drifted into six near-copies. Edit this file, not the HTML.
   Rule order is the source order: several selectors rely on later @media
   blocks overriding earlier ones. A rule only lands here when every page it
   can reach carried the same version of it; the rest stay inline on the
   pages that declared them. */

/* The photos are now wrapped in <picture> so a WebP can be offered ahead of
   the JPEG. <picture> is an inline box by default, which adds a line-box
   descender under the image and made .split-media 20px taller than it was.
   display:contents takes the wrapper out of the box tree entirely, so rules
   written as ".split-media img" lay out exactly as they did before.

   The <source> must then be hidden explicitly. display:contents promotes
   every child of <picture> into the parent's layout, and <source> has no
   display:none of its own, so in a grid it was being counted as an item:
   on /quienes-somos/ it took the second column and pushed the photo onto a
   row of its own. */
picture{display:contents;}
picture>source{display:none;}

:root{--bg-default:#FFFFFF; --bg-paper:#F5F5F5; --bg-paper-2:#ECECEC; --text-primary:rgba(0,0,0,.87); --text-secondary:rgba(0,0,0,.6); --divider:rgba(0,0,0,.12); --action-bg:#000000; --action-text:#FFFFFF; --action-bg-hover:#242424; --outline-hover-bg:rgba(0,0,0,.05); --overlay-strong:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.78) 100%); --nav-scrolled-bg:rgba(255,255,255,.85); --shadow-nav:0 1px 2px rgba(0,0,0,.06); --shadow-card:0 1px 3px rgba(0,0,0,.08); color-scheme:light;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg-default:#0A0A0A; --bg-paper:#1A1A1A; --bg-paper-2:#222222; --text-primary:#FFFFFF; --text-secondary:rgba(255,255,255,.7); --divider:rgba(255,255,255,.12); --action-bg:#FFFFFF; --action-text:#212121; --action-bg-hover:#E4E4E4; --outline-hover-bg:rgba(255,255,255,.08); --overlay-strong:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.86) 100%); --nav-scrolled-bg:rgba(10,10,10,.82); --shadow-nav:0 1px 2px rgba(0,0,0,.5); --shadow-card:0 1px 3px rgba(0,0,0,.5); color-scheme:dark;}
}
[data-theme="dark"]{--bg-default:#0A0A0A; --bg-paper:#1A1A1A; --bg-paper-2:#222222; --text-primary:#FFFFFF; --text-secondary:rgba(255,255,255,.7); --divider:rgba(255,255,255,.12); --action-bg:#FFFFFF; --action-text:#212121; --action-bg-hover:#E4E4E4; --outline-hover-bg:rgba(255,255,255,.08); --overlay-strong:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.86) 100%); --nav-scrolled-bg:rgba(10,10,10,.82); --shadow-nav:0 1px 2px rgba(0,0,0,.5); --shadow-card:0 1px 3px rgba(0,0,0,.5); color-scheme:dark;}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0; background:var(--bg-default); color:var(--text-primary); font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:400; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background-color .25s ease,color .25s ease;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
@media (min-width:900px){
  .wrap{padding:0 48px;}
}
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.01em;margin:0;}
h1{font-size:clamp(2.5rem, 1.55rem + 4.3vw, 6rem);line-height:1.08;}
h2{font-size:clamp(2rem, 1.5rem + 2.3vw, 3.75rem);line-height:1.1;}
h3{font-size:clamp(1.6rem, 1.35rem + 1.1vw, 2.5rem);line-height:1.15;}
p{margin:0;}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--text-secondary);}
.eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px;}
.btn{display:inline-flex;align-items:center;gap:8px; padding:.9rem 1.9rem;border-radius:4px; font-size:.9375rem;font-weight:500;line-height:1.4; border:1px solid transparent;cursor:pointer; transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--action-bg);color:var(--action-text);}
.btn-primary:hover{background:var(--action-bg-hover);}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--divider);}
.btn-outline:hover{background:var(--outline-hover-bg);}
.btn-ghost{background:transparent;color:var(--text-primary);padding:.5rem 0;border-radius:0;}
.btn-ghost svg{transition:transform .18s ease;}
.btn-ghost:hover svg{transform:translateX(4px);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.water-divider{max-width:1240px;margin:0 auto;padding:0 24px;}
@media (min-width:900px){
  .water-divider{padding:0 48px;}
}
.water-divider span{display:block;height:1px; background:linear-gradient(90deg, transparent, var(--divider) 15%, var(--text-secondary) 50%, var(--divider) 85%, transparent); transform:scaleX(0);transform-origin:left center; transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.water-divider.in-view span{transform:scaleX(1);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .water-divider span,.reveal{transition:none !important;transform:none !important;opacity:1 !important;}
}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100; padding:18px 0;transition:background-color .25s ease,box-shadow .25s ease,padding .25s ease;}
.site-header.scrolled{background:var(--nav-scrolled-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow-nav);padding:12px 0;}
.site-header .wrap{display:flex;align-items:center;gap:24px;max-width:1520px;padding:0 18px;}
@media (min-width:640px){
  .site-header .wrap{padding:0 28px;}
}
@media (min-width:1440px){
  .site-header .wrap{padding:0 40px;}
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{height:38px;width:auto;aspect-ratio:1400/535;color:var(--text-primary); display:block;transition:color .25s ease;}
.home-hero .site-header:not(.scrolled) .brand-mark, .home-hero .site-header:not(.scrolled) .icon-btn, .home-hero .site-header:not(.scrolled) .nav-link{color:#fff;}
.home-hero .site-header:not(.scrolled) .nav-link:hover, .home-hero .site-header:not(.scrolled) .icon-btn:hover{background:rgba(255,255,255,.15);}
nav.primary-nav{display:none;}
@media (min-width:960px){
  nav.primary-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
  .nav-item{position:relative;}
  .nav-link{display:flex;align-items:center;gap:5px;padding:10px 16px;border-radius:4px; font-size:.9375rem;font-weight:500;}
  .nav-link:hover{background:var(--outline-hover-bg);}
  .nav-item svg.chev{width:14px;height:14px;transition:transform .18s ease;}
  .nav-item:hover svg.chev, .nav-item:focus-within svg.chev{transform:rotate(180deg);}
  .dropdown{position:absolute;top:100%;left:0;min-width:210px;padding:8px;margin-top:6px; background:var(--bg-default);border:1px solid var(--divider);border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.14); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s;}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:none;}
  .dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:4px;font-size:.9375rem;}
  .dropdown a:hover{background:var(--outline-hover-bg);}
}
.item-icon{width:16px;height:16px;flex-shrink:0;opacity:.7;}
.header-actions{display:flex;align-items:center;gap:8px;}
@media (max-width:959px){
  .header-actions{margin-left:auto;}
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:4px;background:transparent;border:none;color:inherit;cursor:pointer;}
.icon-btn:hover{background:var(--outline-hover-bg);}
.icon-btn svg{width:20px;height:20px;}
.hamburger{display:inline-flex;}
.live-zoom-btn{display:none;align-items:center;gap:8px; padding:.6rem 1.05rem;border-radius:4px; background:var(--action-bg);color:var(--action-text); font-size:.875rem;font-weight:600;white-space:nowrap; transition:background-color .18s ease;}
.live-zoom-btn:hover{background:var(--action-bg-hover);}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;flex-shrink:0; animation:liveDotPulse 1.6s ease-in-out infinite;}
@keyframes liveDotPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
@media (prefers-reduced-motion:reduce){
  .live-dot{animation:none;}
}
body.zoom-live .live-zoom-btn{display:inline-flex;}
body.zoom-live .hamburger{display:none;}
@media (min-width:960px){
  .hamburger{display:none;}
}
.mobile-nav{position:fixed;inset:0;background:var(--bg-default);z-index:99; padding:100px 24px 40px;overflow-y:auto; transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);}
body.nav-open .mobile-nav{transform:translateX(0);}
body.nav-open{overflow:hidden;}
@media (min-width:960px){
  .mobile-nav{display:none;}
}
.mobile-nav a{display:block;padding:14px 0;font-size:1.15rem;font-weight:500;border-bottom:1px solid var(--divider);}
.mobile-nav details summary{padding:14px 0;font-size:1.15rem;font-weight:500;border-bottom:1px solid var(--divider);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.mobile-nav details summary::-webkit-details-marker{display:none;}
.mobile-nav details[open] summary svg{transform:rotate(180deg);}
.mobile-nav details .dropdown-list{padding-left:4px;}
.mobile-nav details .dropdown-list a{display:flex;align-items:center;gap:12px;border-bottom:none;font-weight:400;color:var(--text-secondary);padding:12px 8px;}
.mobile-nav details .dropdown-list .item-icon{width:18px;height:18px;}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; overflow:hidden;background:#0a0a0a;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-media video{display:none;}
.hero.has-video .hero-media video{display:block;}
.hero.has-video .hero-media img{display:none;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--overlay-strong);}
.hero .wrap{position:relative;z-index:1;padding-bottom:64px;padding-top:140px;color:#fff;}
@media (min-width:640px){
  .hero .wrap{padding-top:160px;padding-bottom:96px;}
}
.hero h1{color:#fff;max-width:16ch;}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);}
.hero .btn-outline:hover{background:rgba(255,255,255,.12);}
.scroll-cue{display:none; position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:1; color:rgba(255,255,255,.75);flex-direction:column;align-items:center;gap:8px; font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;}
.scroll-cue svg{animation:bob 2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media (prefers-reduced-motion:reduce){
  .scroll-cue svg{animation:none;}
}
.section{padding:64px 0;}
@media (min-width:640px){
  .section{padding:88px 0;}
}
@media (min-width:1024px){
  .section{padding:112px 0;}
}
.section-paper{background:var(--bg-paper);}
.split{display:grid;gap:36px;align-items:center;}
@media (min-width:640px){
  .split{gap:48px;}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:80px;}
  .split.reverse .split-media{order:2;}
}
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:4px;aspect-ratio:4/5;}
.split-media{position:relative;}
.split-copy p+p{margin-top:16px;}
.purpose{max-width:820px;}
.purpose .eyebrow{margin-bottom:20px;}
.purpose p.lead{margin-top:22px;}
.info-band{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);}
.info-grid{display:grid;grid-template-columns:1fr;gap:0;}
@media (min-width:640px){
  .info-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .info-grid{grid-template-columns:repeat(3,1fr);}
}
.info-card{padding:36px 4px;border-bottom:1px solid var(--divider); display:flex;flex-direction:column;gap:14px;}
@media (min-width:640px){
  .info-card{padding:40px 28px;}
}
.info-card:last-child{border-bottom:none;}
@media (min-width:1024px){
  .info-card{border-bottom:none;border-right:1px solid var(--divider);padding:44px 40px;}
  .info-card:last-child{border-right:none;}
}
.info-card svg{width:26px;height:26px;color:var(--text-secondary);}
.info-card h4{font-size:1.4rem;font-weight:700;}
.info-card p{color:var(--text-secondary);}
.info-card .btn-ghost{margin-top:auto;}
.calendar-cta{max-width:600px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;}
.calendar-cta-icon{width:38px;height:38px;color:var(--text-secondary);margin-bottom:22px;}
.calendar-cta h2{margin-top:10px;}
.calendar-cta .lead{margin-top:18px;}
.calendar-cta .btn-row{justify-content:center;}
.ministry-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:640px){
  .ministry-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .ministry-grid{grid-template-columns:repeat(3,1fr);}
}
.ministry-card{display:flex;flex-direction:column;padding:36px 32px;background:var(--bg-paper); border:1px solid var(--divider);border-radius:4px; transition:background .2s ease,transform .2s ease;}
.ministry-card:hover{background:var(--bg-paper-2);transform:translateY(-2px);}
.ministry-icon{width:30px;height:30px;color:var(--text-secondary);margin-bottom:18px;display:block;}
.ministry-card h4{font-size:1.3rem;font-weight:700;margin-bottom:8px;}
.ministry-card p{color:var(--text-secondary);margin-bottom:18px;}
.btn-ghost-label{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500;color:var(--text-primary);}
.btn-ghost-label svg{transition:transform .18s ease;}
.ministry-card:hover .btn-ghost-label svg{transform:translateX(4px);}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:4px;border:1px solid var(--divider);color:var(--text-secondary); transition:background .18s ease,color .18s ease;}
.social-row a:hover{background:var(--outline-hover-bg);color:var(--text-primary);}
.social-icon{width:17px;height:17px;}
.page-title-band{padding:150px 0 48px;}
@media (min-width:640px){
  .page-title-band{padding:170px 0 64px;}
}
.visit-hero-photo{width:100%;border-radius:4px;aspect-ratio:4/3;object-fit:cover; margin-bottom:8px;}
.visit-times{display:flex;flex-direction:column;gap:20px;margin:26px 0 8px;}
.visit-times h4{font-size:1.1rem;font-weight:700;margin-bottom:4px;}
.visit-times h4 small{font-weight:400;color:var(--text-secondary);font-size:.85em;}
.visit-times p{color:var(--text-secondary);}
.site-footer{background:var(--bg-paper);border-top:1px solid var(--divider);padding:72px 0 32px;}
.footer-grid{display:grid;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--divider);}
@media (min-width:760px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}
}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.footer-brand .brand-mark{height:34px;}
.footer-info{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.footer-info-row{display:flex;align-items:flex-start;gap:10px;color:var(--text-secondary); font-size:.9rem;line-height:1.4;}
a.footer-info-row:hover{color:var(--text-primary);}
.footer-info-icon{width:16px;height:16px;flex-shrink:0;opacity:.7;margin-top:1px;}
.footer-col h5{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 18px;}
.footer-col a,.footer-col p{display:block;padding:6px 0;color:var(--text-primary);font-size:.95rem;}
.footer-col p{color:var(--text-secondary);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:.85rem;color:var(--text-secondary);}
.footer-bottom a{color:var(--text-secondary);}
.footer-bottom a:hover{color:var(--text-primary);}
@media (min-width:640px){
  .scroll-cue{display:flex;}
}
.ministry-card .btn-ghost-label{margin-top:auto;}
.about-wrap{padding-bottom:80px;}
.lang-toggle-row{display:flex;justify-content:flex-end;margin-bottom:28px;}
.lang-toggle{display:inline-flex;border:1px solid var(--divider);border-radius:4px;overflow:hidden;flex-shrink:0;}
.lang-btn{padding:.6rem 1.2rem;font-size:.875rem;font-weight:600;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:background .18s ease,color .18s ease;}
.lang-btn[aria-pressed="true"]{background:var(--action-bg);color:var(--action-text);}
.lang-btn:not([aria-pressed="true"]):hover{background:var(--outline-hover-bg);}
.legal-updated{color:var(--text-secondary);margin:14px 0 4px;}
.legal-body p{color:var(--text-secondary);line-height:1.7;margin-bottom:14px;}
.legal-body p:last-child{margin-bottom:0;}
.legal-body ul{margin:0 0 14px;padding-left:22px;color:var(--text-secondary);line-height:1.7;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:var(--text-primary);text-decoration:underline;}
.about-grid{display:grid;grid-template-columns:1fr;gap:0;}
@media (min-width:900px){
  .about-grid{grid-template-columns:190px 1fr;gap:56px;align-items:start;}
}
.about-sidenav{display:none;}
@media (min-width:900px){
  .about-sidenav{display:block;position:sticky;top:104px;}
}
.about-sidenav ul{display:flex;flex-direction:column;gap:2px;}
.about-sidenav a{display:block;padding:9px 0 9px 16px;border-left:2px solid var(--divider); color:var(--text-secondary);font-size:.9rem;font-weight:600; transition:color .2s ease,border-color .2s ease;}
.about-sidenav a:hover{color:var(--text-primary);}
.about-sidenav li.active a{color:var(--text-primary);border-left-color:var(--text-primary);}
.about-content{display:flex;flex-direction:column;min-width:0;}
.about-section{padding:52px 0;border-bottom:1px solid var(--divider);}
.about-content>.about-section:first-child{padding-top:0;}
.about-section:last-child{border-bottom:none;}
.about-photo{width:100%;border-radius:4px;margin-top:32px;aspect-ratio:16/10;object-fit:cover;}
.values-list{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.value-item{border:1px solid var(--divider);border-radius:4px;background:var(--bg-paper);overflow:hidden;}
.value-item summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center; justify-content:space-between;gap:16px;font-weight:700;font-size:1.05rem;}
.value-item summary::-webkit-details-marker{display:none;}
.value-item summary svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s ease;color:var(--text-secondary);}
.value-item[open] summary svg{transform:rotate(180deg);}
.value-item p{padding:0 20px 20px;color:var(--text-secondary);}
.about-pastors{display:grid;gap:28px;align-items:center;margin-top:8px;}
@media (min-width:700px){
  .about-pastors{grid-template-columns:1.1fr .9fr;gap:44px;}
}
.about-pastors img{width:100%;border-radius:4px;aspect-ratio:4/5;object-fit:cover;}
.steps-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:640px){
  .steps-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .steps-grid{grid-template-columns:repeat(3,1fr);}
}
.step-card{display:block;padding:36px 32px;background:var(--bg-paper); border:1px solid var(--divider);border-radius:4px; transition:background .2s ease,transform .2s ease;}
.step-card:hover{background:var(--bg-paper-2);transform:translateY(-2px);}
.step-number{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;border:1px solid var(--divider); font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:20px;}
.step-card h4{font-size:1.3rem;font-weight:700;margin-bottom:8px;}
.step-card p{color:var(--text-secondary);margin-bottom:18px;}
.title-band-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* ===========================================================================
   Frosted glass layer.

   Appended to site.css by tools/build.mjs, so it lands after the merged
   original rules and wins without needing !important.

   Glass is only applied where something actually sits behind the element to
   be blurred: the fixed header that content scrolls under, the dropdowns and
   the mobile drawer that cover the page, and the hero buttons that sit on a
   photograph. The cards (.info-card, .ministry-card, .msg-card, .notepad)
   are deliberately left alone — they sit on flat section backgrounds, so a
   blur there resolves to a slightly grey panel and reads as a mistake rather
   than as glass.

   Tokens are declared all three ways the site switches theme, because the
   opaque --bg-* tokens have no alpha channel to work with.
   =========================================================================== */

:root{
  --glass-nav:rgba(255,255,255,.66);
  --glass-surface:rgba(255,255,255,.78);
  --glass-sheet:rgba(255,255,255,.82);
  --glass-edge:rgba(255,255,255,.65);
  --glass-hair:rgba(0,0,0,.09);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.75);
  --glass-drop:0 16px 44px rgba(0,0,0,.18);
  --glass-on-photo:rgba(255,255,255,.14);
  --glass-on-photo-hover:rgba(255,255,255,.26);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --glass-nav:rgba(12,12,14,.62);
    --glass-surface:rgba(26,26,30,.76);
    --glass-sheet:rgba(16,16,19,.84);
    --glass-edge:rgba(255,255,255,.16);
    --glass-hair:rgba(255,255,255,.10);
    --glass-lift:inset 0 1px 0 rgba(255,255,255,.14);
    --glass-drop:0 16px 44px rgba(0,0,0,.6);
  }
}
[data-theme="dark"]{
  --glass-nav:rgba(12,12,14,.62);
  --glass-surface:rgba(26,26,30,.76);
  --glass-sheet:rgba(16,16,19,.84);
  --glass-edge:rgba(255,255,255,.16);
  --glass-hair:rgba(255,255,255,.10);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.14);
  --glass-drop:0 16px 44px rgba(0,0,0,.6);
}

/* --- the header the page scrolls under ----------------------------------- */
/* It already blurred at 10px; this deepens it and adds the saturation that
   keeps colour from going flat and grey behind the glass. */
.site-header.scrolled{
  background:var(--glass-nav);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--glass-hair);
  box-shadow:var(--glass-lift),var(--shadow-nav);
}

/* --- menus that cover the page ------------------------------------------- */
.dropdown{
  background:var(--glass-surface);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-edge);
  border-radius:12px;
  box-shadow:var(--glass-lift),var(--glass-drop);
}

.mobile-nav{
  background:var(--glass-sheet);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
}

/* --- buttons sitting on a photograph ------------------------------------- */
/* The outline button over the hero was the one genuinely low-contrast thing
   on the page: a thin white rule over a pale part of the photo. A frosted
   fill gives the label something to sit on. */
.hero .btn-outline{
  background:var(--glass-on-photo);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-color:rgba(255,255,255,.6);
}
.hero .btn-outline:hover{background:var(--glass-on-photo-hover);}

/* The live-now Zoom pill in the header rides on the same photo. */
.live-zoom-btn{
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}

/* --- fallbacks ------------------------------------------------------------ */
/* Without backdrop-filter these tints are plain transparency, and a menu
   would sit unreadable on whatever is under it. Go back to solid. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.scrolled{background:var(--nav-scrolled-bg);}
  .dropdown,.mobile-nav{background:var(--bg-default);border-color:var(--divider);}
  .hero .btn-outline{background:rgba(0,0,0,.35);}
}
@media (prefers-reduced-transparency:reduce){
  .site-header.scrolled{background:var(--bg-default);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .dropdown,.mobile-nav{background:var(--bg-default);border-color:var(--divider);
    -webkit-backdrop-filter:none;backdrop-filter:none;}
  .hero .btn-outline{background:rgba(0,0,0,.5);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* ===========================================================================
   Layout corrections, appended after the merged stylesheet and the glass
   layer so they win without !important. Not styling — these are fixes.
   =========================================================================== */

/* The dropdowns are positioned left:0 against their nav item, so each box
   grows rightward. That is fine until the last item, which already sits at
   the right edge of a right-aligned nav: "Herramientas" is ~147px wide and
   the box has a 210px minimum, so it hangs ~60px past the item and runs out
   of the viewport on a narrower desktop. Anchor the last one to its right
   edge instead, so it grows inward.

   :last-child rather than naming Herramientas, so it keeps working if the
   nav gains or loses an item. */
.primary-nav .nav-item:last-child .dropdown{
  left:auto;
  right:0;
}