:root{
  --paper: #F3EEE4;
  --paper-2: #EAE2D2;
  --ink: #211E19;
  --ink-2: #2B2721;
  --ink-soft: #55503F;
  --stone: #948C79;
  --line: rgba(33,30,25,0.14);
  --line-on-ink: rgba(243,238,228,0.14);
  --moss: #5C6650;
  --yellow: #FFE000;
  --yellow-dim: #7A6008;
  --white: #FBF9F4;
  --text-on-ink: #E7E1D3;
  --text-on-ink-soft: #A69F8C;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:300;
}
h1,h2,h3,.display{
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing: -0.01em;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }
::selection{ background:var(--yellow); color:var(--ink); }

.reveal{ opacity:0; transform:translateY(34px); transition: opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- nav (idéntico a index.html) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px;
  background:rgba(243,238,228,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
}
.nav-logo img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a.nav-item{ font-size:11.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); transition:color .3s; }
.nav-links a.nav-item:hover{ color:var(--ink); }
.nav-cta{
  font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--ink-soft); border-radius:100px; color:var(--ink);
  transition: background .3s, color .3s, border-color .3s;
}
.nav-cta:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }

.nav-burger{ display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; }
.nav-burger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:background .3s, transform .3s, opacity .3s; }
.nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--paper);
  padding:90px 32px 40px; display:flex; flex-direction:column; overflow-y:auto;
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .45s cubic-bezier(.19,1,.22,1), opacity .3s, visibility 0s linear .45s;
}
.nav-mobile-menu.open{ transform:translateY(0); opacity:1; visibility:visible; transition:transform .45s cubic-bezier(.19,1,.22,1), opacity .3s; }
.nav-mobile-close{ position:absolute; top:26px; right:26px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.nav-mobile-item{
  font-size:16px; font-weight:500; letter-spacing:0.01em; color:var(--ink); padding:18px 2px;
  border-bottom:1px solid var(--line); text-align:left; background:none; border-left:none; border-right:none; border-top:none;
  font-family:inherit; cursor:pointer; width:100%;
}
.nav-mobile-cta{
  margin-top:28px; text-align:center; background:var(--yellow); color:var(--ink); font-weight:600; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase; padding:17px; border-radius:100px;
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}
@media (min-width:761px){ .nav-mobile-menu{ display:none; } }
@media (max-width:600px){ .nav{ padding:16px 22px; } }

/* ---------- buttons / section head ---------- */
.btn-solid-yellow{
  background:var(--yellow); color:var(--ink); font-weight:600; font-size:12.5px;
  letter-spacing:0.1em; text-transform:uppercase; padding:17px 34px; border-radius:100px;
  display:inline-flex; align-items:center; gap:12px; border:1px solid var(--yellow);
  transition: transform .4s cubic-bezier(.19,1,.22,1), box-shadow .4s;
}
.btn-solid-yellow:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(255,224,0,0.45); }
.btn-ghost{
  font-size:12.5px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--ink-soft); padding-bottom:5px; transition:border-color .3s, opacity .3s; opacity:0.9;
}
.btn-ghost:hover{ border-color:var(--ink); opacity:1; }
.kicker{ font-size:11.5px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--stone); margin-bottom:22px; }
.section-title{ font-size:clamp(28px,4vw,46px); font-weight:400; line-height:1.18; text-wrap:balance; color:var(--ink); }
.section-lede{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin-top:22px; max-width:560px; font-weight:300; }

/* ---------- blog: hero, grid, card ---------- */
.blog-hero{ padding:150px 0 60px; border-bottom:1px solid var(--line); }
.blog-section{ padding:56px 0; }
.blog-section-title{ font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss); margin-bottom:8px; }
.blog-section-title.featured{ color:var(--yellow-dim); }
.blog-group-label{ font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--stone); margin-bottom:24px; }
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.blog-card{ background:var(--paper); padding:44px; transition:background .4s; display:flex; flex-direction:column; }
.blog-card-wide{ grid-column:span 2; }
.blog-card-wide img{ aspect-ratio:12/5 !important; }
@media (max-width:820px){ .blog-card-wide{ grid-column:span 1; } .blog-card-wide img{ aspect-ratio:3/2 !important; } }

.blog-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; padding:0 0 44px; }
.blog-filter-btn{
  font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:11px 20px; border-radius:100px; border:1px solid var(--line); background:none; color:var(--ink-soft);
  cursor:pointer; transition:background .3s, color .3s, border-color .3s; font-family:inherit;
}
.blog-filter-btn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.blog-filter-btn.active{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
@media (max-width:600px){ .blog-filter-bar{ gap:8px; } .blog-filter-btn{ padding:9px 16px; font-size:11px; } }
.blog-card:hover{ background:var(--paper-2); }
.blog-card-title{ font-size:22px; font-weight:400; line-height:1.3; margin:14px 0 12px; color:var(--ink); }
.blog-card-excerpt{ font-size:14px; line-height:1.75; color:var(--ink-soft); font-weight:300; margin-bottom:20px; flex-grow:1; }
.blog-card-link{ font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--moss); padding-bottom:3px; align-self:flex-start; transition:gap .3s, color .3s; }
.blog-card-link:hover{ color:var(--moss); }
@media (max-width:820px){ .blog-grid{ grid-template-columns:1fr; } .blog-hero{ padding:130px 0 40px; } }

/* ---------- blog: article page ---------- */
.article-hero{ padding:150px 0 20px; }
.article-title{ font-size:clamp(30px,4.4vw,50px); font-weight:400; line-height:1.2; color:var(--ink); text-wrap:balance; max-width:820px; }
.article-meta{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-top:18px; }
.article-body{ max-width:680px; margin:0 auto; padding:40px 40px 90px; }
.article-body h2{ font-size:24px; font-weight:400; margin:44px 0 18px; color:var(--ink); }
.article-body p{ font-size:16.5px; line-height:1.9; color:var(--ink-2); font-weight:300; margin-bottom:22px; }
.article-body img{ width:100%; height:auto; margin:36px 0; }
.article-cta{
  margin-top:20px; padding:36px; background:var(--paper-2); border-left:3px solid var(--moss);
}
.article-cta p{ margin-bottom:16px; }
.article-back{ display:inline-block; margin-top:8px; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.article-back:hover{ color:var(--ink); border-color:var(--ink); }
@media (max-width:600px){ .article-hero{ padding:130px 0 10px; } .article-body{ padding:32px 22px 70px; } }

/* ---------- footer ---------- */
footer{ background:var(--ink); padding:56px 0 32px; border-top:1px solid var(--line-on-ink); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--line-on-ink); margin-bottom:28px; }
.foot-logo img{ height:56px; width:auto; }
.foot-links{ display:flex; gap:48px; flex-wrap:wrap; }
.foot-col-title{ font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-on-ink-soft); margin-bottom:16px; }
.foot-col a, .foot-col div, .foot-col button{ display:block; font-size:13.5px; color:var(--text-on-ink); margin-bottom:10px; font-weight:300; }
.foot-col a:hover, .foot-col button:hover{ color:var(--yellow); }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-meta{ font-size:11.5px; color:var(--text-on-ink-soft); font-weight:300; }
@media (max-width:600px){
  footer{ padding:44px 0 28px; }
  .foot-top{ flex-direction:column; gap:28px; }
  .foot-links{ gap:36px; }
  .foot-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------- chatbot fab ---------- */
.chatbot-fab{
  position:fixed; bottom:26px; right:26px; z-index:150;
  display:inline-flex; align-items:center; gap:0;
  background:var(--ink); color:var(--white);
  border-radius:100px; padding:0; height:60px; width:60px;
  box-shadow:0 12px 30px -8px rgba(33,30,25,0.5);
  overflow:hidden; transition:width .45s cubic-bezier(.19,1,.22,1), background .3s, box-shadow .3s;
  text-decoration:none; white-space:nowrap;
}
.chatbot-fab .cb-icon{ flex-shrink:0; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.chatbot-fab .cb-icon svg{ width:26px; height:26px; }
.chatbot-fab .cb-label{ font-size:13px; font-weight:500; letter-spacing:0.04em; padding-right:22px; opacity:0; transition:opacity .3s; }
.chatbot-fab:hover{ width:224px; background:#000; }
.chatbot-fab:hover .cb-label{ opacity:1; }
.chatbot-fab .cb-dot{ position:absolute; top:12px; right:12px; width:11px; height:11px; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); }
.chatbot-fab.offhours{ background:var(--stone); width:auto; padding-right:2px; }
.chatbot-fab.offhours .cb-label{ opacity:1; padding-right:20px; }
.chatbot-fab.offhours .cb-dot{ background:var(--ink-soft); border-color:var(--stone); }
.chatbot-fab.offhours:hover{ background:#7d7869; }
@media (max-width:760px){
  .chatbot-fab.offhours{ width:56px; padding-right:0; }
  .chatbot-fab.offhours .cb-label{ display:none; }
  .chatbot-fab{ bottom:18px; right:18px; height:56px; width:56px; }
  .chatbot-fab .cb-icon{ width:56px; height:56px; }
  .chatbot-fab:hover{ width:56px; }
  .chatbot-fab:hover .cb-label{ opacity:0; }
  .chatbot-fab .cb-label{ display:none; }
}

/* ---------- promo modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:210; background:rgba(20,18,15,0.72);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-panel{
  background:var(--paper); max-width:560px; width:100%; max-height:88vh; overflow-y:auto;
  padding:48px 44px; position:relative; box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
}
.modal-close{
  position:absolute; top:20px; right:22px; background:none; border:none; color:var(--ink-soft);
  font-size:30px; line-height:1; cursor:pointer; font-weight:200; transition:color .3s;
}
.modal-close:hover{ color:var(--ink); }
.modal-title{ font-size:24px; font-weight:400; font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; margin:6px 0 10px; color:var(--ink); }
.modal-lede{ font-size:13.5px; color:var(--ink-soft); margin-bottom:32px; line-height:1.7; font-weight:300; }
.promo-cta-secondary{
  display:block; width:100%; text-align:center; margin-top:12px; padding:15px;
  border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  transition:border-color .3s, background .3s, color .3s;
}
.promo-cta-secondary:hover{ border-color:var(--ink-soft); background:var(--paper-2); color:var(--ink); }
@media (max-width:480px){ .modal-panel{ padding:36px 24px; } }