:root{--bg:#cfd6da;--brand:#b54b4b;--brand-2:#8a3434;--ink:#17181a;--ink-2:#3b3d40;--card:#ffffff}
*{box-sizing:border-box}
html{font-size:16px}
@media (max-width:980px){html{font-size:15px}}
@media (max-width:720px){html{font-size:14px}}
@media (max-width:480px){html{font-size:13.5px}}
body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}

/* Header and nav */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:linear-gradient(180deg,#eef2f5,rgba(238,242,245,.9));border-bottom:4px solid var(--brand)}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:52px;height:52px;border-radius:8px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.brand strong{display:block;font-weight:800;letter-spacing:.3px;font-size:1.05rem}
.brand span{display:block;font-size:.86rem;color:var(--ink-2)}
.nav{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;text-decoration:none;color:var(--ink);font-weight:700;padding:10px 12px;border-radius:10px;transition:all .18s ease}
.nav a.active,.nav a:hover{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(181,75,75,.35)}
.nav .cta-link{background:var(--brand);color:#fff}
.nav .cta-link:hover{background:var(--brand-2)}
/* Mobile menu toggle */
.menu-btn{display:none}
@media (max-width:680px){
  .menu-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d9dee2;background:#fff;color:var(--ink);border-radius:10px;padding:8px 10px;font-weight:700;z-index:1001;cursor:pointer}
  .site-header{position:relative;flex-wrap:wrap}
  nav{width:100%;margin-top:10px;position:relative}
  .nav{display:none;flex-direction:column;gap:12px;position:absolute;top:100%;left:0;right:0;background:var(--card);padding:20px;border-radius:0 0 14px 14px;box-shadow:0 8px 26px rgba(0,0,0,.15);z-index:1000;border-top:1px solid #e9ecef}
  .nav.open{display:flex}
  .nav a{width:100%;text-align:left;padding:12px 16px;border-radius:8px;margin:2px 0}
}

/* Layout */
.container{max-width:1180px;margin:28px auto;padding:0 18px;background:var(--card);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12)}

/* Hero */
.hero{position:relative}
.hero-img{width:100%;height:360px;object-fit:cover;border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.16)}
.hero-text{position:absolute;left:24px;bottom:18px;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.35));color:#fff;padding:14px 16px;border-radius:10px}
.hero-text h1{margin:0 0 4px 0;font-size:2rem;letter-spacing:.2px}
.hero-text p{margin:0;font-weight:600}

/* Home grid visuals */
.grid{display:grid;grid-template-columns:minmax(280px,800px);justify-content:center;gap:20px;margin-top:24px}
.grid img{width:100%;height:auto;display:block}
.poster{width:100%;border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.14);object-fit:cover}
.poster-link{position:relative;display:block}
.poster-link:after{content:"Ver";position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-weight:700;padding:6px 10px;border-radius:8px;opacity:.9}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox[hidden]{display:none}

/* Typography scale */
.content{background:var(--card);padding:24px;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12);line-height:1.7}
.content .lead{font-size:1.15rem;color:#2b2e31;line-height:1.85;background:#fbfbfc;border-left:4px solid #e3e7ea;padding:10px 12px;border-radius:8px}
.content h1{font-size:2.3rem;color:var(--brand);margin:6px 0 14px 0;line-height:1.2}
.content h2{font-size:1.65rem;color:var(--brand-2);margin:22px 0 10px 0}
.content h3{font-size:1.25rem;color:var(--ink);margin:18px 0 8px 0}
.content p{font-size:1.02rem;color:var(--ink-2)}
.content strong{color:var(--ink)}
.content h1 strong,.content h2 strong,.content h3 strong{color:var(--brand);font-weight:800}
.content a:not(.cta-button){color:var(--brand-2);text-decoration:underline}
.content h1 .anchor,.content h2 .anchor,.content h3 .anchor{opacity:0;margin-left:.5ch;font-size:.8em;color:#a1a6aa;text-decoration:none}
.content h1:hover .anchor,.content h2:hover .anchor,.content h3:hover .anchor{opacity:1}
.content ul,.content ol{padding-left:1.3rem;margin:10px 0 16px}
.content li{margin:6px 0}
.content blockquote{margin:18px 0;padding:12px 16px;border-left:4px solid var(--brand);background:#faf5f5;border-radius:10px;color:var(--ink-2)}
.content hr{border:none;height:1px;background:#e3e7ea;margin:24px 0}

/* Media inside content from DOCX */
.content img,.content video,.content iframe{display:block;max-width:60%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);margin:16px auto}
.screenshot{max-width:28%}
.content .docx-image{max-width:50%;height:auto;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);margin:12px auto;display:block}
.content table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;border:1px solid #e1e6ea;border-radius:12px;overflow:hidden}
.content table th,.content table td{padding:10px 12px;border-bottom:1px solid #e9eef1}
.content table th{background:#f5f7f9;text-align:left}
.content table tr:last-child td{border-bottom:none}
.content .table-wrapper{overflow:auto}

/* CTA inside content */
.cta-wrap{display:flex;justify-content:center;margin:18px 0 22px}
.cta-button{display:inline-block;background:var(--brand-2);color:#fff;text-decoration:none;font-weight:800;padding:14px 22px;border-radius:12px;box-shadow:0 10px 22px rgba(181,75,75,.35);font-size:1.1rem;letter-spacing:.3px;min-width:260px;text-align:center}
.content .cta-button{color:#fff !important;text-decoration:none !important}
.content .cta-button:link,.content .cta-button:visited{color:#fff !important;text-decoration:none !important}
.cta-button:hover{background:var(--brand)}

/* Includes page enhancements */
.includes-page{--hi-bg:#fff;--hi-border:#e6ebef;--hi-pill:#f1f4f6}
.includes-page .lead{border-left-color:#ffd3d3;background:#fff7f7}
.includes-page h1{letter-spacing:.3px}
.includes-page h2{color:var(--brand);position:relative;padding-left:10px;margin:28px 0 12px}
.includes-page h2:before{content:"";position:absolute;left:0;top:.38em;width:4px;height:1.1em;background:var(--brand);border-radius:4px}
.includes-page h2:after{content:"";display:block;height:1px;background:linear-gradient(90deg,rgba(181,75,75,.35),rgba(0,0,0,0));margin-top:8px}
.includes-page h3{color:#1f2328;margin:22px 0 10px;font-weight:800;letter-spacing:.2px}
.includes-page h3:after{content:"";display:block;width:40px;height:3px;background:#e9ecef;border-radius:2px;margin-top:6px}
.includes-page ul{list-style:none;padding-left:0}
.includes-page ul>li{margin:10px 0;background:#fff;border:1px solid #e9edf1;border-radius:10px;padding:10px 12px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.includes-page ul>li:before{content:none}
.includes-page ul ul{margin:8px 0 6px 0;border-left:3px solid #eef2f5;padding-left:12px}
.includes-page p{margin:12px 0 14px;line-height:1.85}
.includes-page .lead{margin-top:10px;margin-bottom:18px}
.includes-page details.accordion{border:1px solid #e1e6ea;border-radius:12px;padding:0 12px 10px;margin:12px 0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.includes-page details.accordion summary{cursor:pointer;padding:12px 0;font-weight:800;color:var(--brand-2);list-style:none;display:flex;align-items:center;gap:8px}
.includes-page details.accordion summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#f1f4f6;color:#333;font-weight:900}
.includes-page details.accordion[open] summary::before{content:"–"}
.includes-page details.accordion[open] summary{color:var(--brand)}
.includes-page details.accordion summary::marker,.includes-page details.accordion summary::-webkit-details-marker{display:none}
.includes-page .accent{background:linear-gradient(180deg,#fbfbfc,#f7f9fb);border:1px solid #e1e6ea;border-radius:12px;padding:12px 14px;margin:14px 0}
.includes-page .callout{border-left:4px solid var(--brand);background:#fff7f7;border-radius:10px;padding:10px 12px}
@media (max-width:680px){
  .includes-page ul>li{padding:10px 12px}
  .content h1{font-size:1.8rem}
  .content h2{font-size:1.35rem}
}

/* Footer */
.site-footer{padding:22px;text-align:center;color:#666}

/* Small screens */
@media (max-width:680px){
  .hero-img{height:260px}
  .hero-text h1{font-size:1.5rem}
  .content{padding:18px}
  .content h1{font-size:1.8rem}
  .content h2{font-size:1.35rem}
}

/* Back to top */
.back-to-top{position:fixed;right:18px;bottom:18px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;border:none;box-shadow:0 10px 24px rgba(0,0,0,.2);cursor:pointer;opacity:.92}
.back-to-top:hover{opacity:1}