/* ============================================================
   Beneficio Hispano — Final Expense / Seguro de Gastos Finales
   Design tokens
   Colors:  --ink #1C2B29 (near-black green-grey text)
            --paper #F5F0E6 (warm parchment background)
            --teal #16443B (deep teal, primary brand)
            --teal-light #EAF1EE
            --gold #B4832B (muted ochre accent, CTAs)
            --gold-light #FBF3E1
            --line #D8CFBD (hairline rule)
   Type: "Fraunces" for display/headlines, "Source Sans 3" for body
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root{
  --ink:#1C2B29;
  --paper:#F5F0E6;
  --teal:#16443B;
  --teal-light:#EAF1EE;
  --gold:#B4832B;
  --gold-light:#FBF3E1;
  --line:#D8CFBD;
  --max:1080px;
  --radius:6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', Arial, sans-serif;
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  color:var(--teal);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2rem,4vw,2.9rem);}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:2.2em;}
h3{font-size:1.2rem; margin-top:1.6em;}
p{margin:0 0 1.1em;}
a{color:var(--teal); text-decoration-thickness:2px;}
a:hover{color:var(--gold);}
img{max-width:100%; height:auto;}

.container{max-width:var(--max); margin:0 auto; padding:0 20px;}

/* Skip link for accessibility */
.skip-link{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:10px 16px; z-index:100;}
.skip-link:focus{left:10px; top:10px;}

/* Top bar */
.topbar{background:var(--teal); color:#fff; font-size:15px;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding:8px 20px; flex-wrap:wrap; gap:8px;}
.topbar a{color:#fff; margin-left:14px; text-decoration:none;}
.topbar a:hover{color:var(--gold-light); text-decoration:underline;}
.lang-switch a{border:1px solid rgba(255,255,255,.5); padding:2px 8px; border-radius:4px;}

/* Header / nav */
header.site-header{background:var(--paper); border-bottom:1px solid var(--line);}
.site-header .container{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; flex-wrap:wrap; gap:10px;}
.brand{font-family:'Fraunces',serif; font-weight:700; font-size:1.4rem; color:var(--teal); text-decoration:none;}
nav.main-nav ul{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;}
nav.main-nav a{color:var(--ink); text-decoration:none; font-weight:600; font-size:16px;}
nav.main-nav a:hover{color:var(--teal);}

/* Sticky header shadow */
header.site-header{position:sticky; top:0; z-index:50; box-shadow:0 1px 0 var(--line);}

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 88% -10%, rgba(180,131,43,.14), transparent 55%),
    radial-gradient(circle at -5% 115%, rgba(22,68,59,.10), transparent 50%),
    var(--teal-light);
  border-bottom:1px solid var(--line);
  padding:52px 0 46px;
  overflow:hidden;
}
.hero .eyebrow{color:var(--gold); font-weight:700; margin-bottom:.4em; font-size:16px; letter-spacing:.03em;}
.hero p.lead{font-size:1.2rem; max-width:64ch; color:var(--ink);}
.hero .btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}

/* Breadcrumbs */
.breadcrumbs{font-size:.88rem; color:#5B6663; margin:16px 0 0; padding:0 0 4px;}
.breadcrumbs a{color:#5B6663; text-decoration:none;}
.breadcrumbs a:hover{color:var(--teal); text-decoration:underline;}
.breadcrumbs span[aria-current]{color:var(--teal); font-weight:600;}

/* Trust band (logos / stat strip) */
.trust-band{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0;}
.trust-band .container{display:flex; justify-content:space-around; flex-wrap:wrap; gap:18px; text-align:center;}
.trust-item{max-width:220px;}
.trust-item .num{font-family:'Fraunces',serif; font-weight:700; color:var(--teal); font-size:1.7rem; display:block;}
.trust-item .label{font-size:.9rem; color:#5B6663;}

/* Icon feature cards */
.icon-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin:1.8em 0;}
.icon-card{text-align:left;}
.icon-circle{
  width:52px; height:52px; border-radius:50%;
  background:var(--gold-light); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; font-size:1.4rem;
}
.icon-card h3{margin-top:0;}

/* Reviews / testimonial style (no fabricated quotes — structural only) */
.review-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px;}
.review-card .stars{color:var(--gold); letter-spacing:2px; margin-bottom:8px;}

/* State chip grid for programmatic hub */
.state-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin:1.6em 0;}
.state-chip{
  display:block; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 10px; text-decoration:none; color:var(--teal);
  font-weight:600; transition:border-color .15s, transform .15s;
}
.state-chip:hover{border-color:var(--gold); transform:translateY(-2px); color:var(--gold);}

/* Quick answer box (AEO) */
.quick-answer{
  background:var(--gold-light);
  border-left:5px solid var(--gold);
  border-radius:var(--radius);
  padding:20px 24px;
  margin:24px 0 34px;
  font-size:1.05rem;
}
.quick-answer strong{color:var(--teal);}

/* CTA buttons */
.btn{
  display:inline-block;
  background:var(--gold);
  color:#fff !important;
  padding:14px 26px;
  border-radius:var(--radius);
  font-weight:700;
  text-decoration:none;
  font-size:1.05rem;
  border:none;
}
.btn:hover{background:#96691F;}
.btn.secondary{background:var(--teal);}
.btn.secondary:hover{background:#0D2E27;}
.cta-block{
  background:var(--teal);
  color:#fff;
  border-radius:var(--radius);
  padding:34px 28px;
  margin:40px 0;
  text-align:center;
}
.cta-block h2, .cta-block p{color:#fff;}
.cta-block .btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:16px;}

/* Cards / tables */
table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.98rem;}
th,td{border:1px solid var(--line); padding:10px 12px; text-align:left;}
th{background:var(--teal-light); color:var(--teal); font-family:'Fraunces',serif;}

.plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:1.6em 0;}
.plan-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.plan-card h3{margin-top:0;}

/* FAQ */
details.faq{border-bottom:1px solid var(--line); padding:14px 0;}
details.faq summary{font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem; color:var(--teal); cursor:pointer;}
details.faq p{margin-top:10px;}

/* Steps */
ol.steps{padding-left:0; list-style:none; counter-reset:step; margin:1.6em 0;}
ol.steps li{counter-increment:step; position:relative; padding:0 0 20px 54px; min-height:38px;}
ol.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-2px;
  width:38px; height:38px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700;
}

/* Disclaimer / footer */
.disclaimer{font-size:.85rem; color:#5B6663; border-top:1px solid var(--line); margin-top:50px; padding-top:20px;}
footer.site-footer{background:var(--teal); color:#DCE7E3; padding:34px 0; margin-top:60px; font-size:.92rem;}
footer.site-footer a{color:#fff;}
footer.site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;}

/* Utility */
.updated{color:#5B6663; font-size:.9rem;}
.badge{display:inline-block; background:var(--teal-light); color:var(--teal); border-radius:4px; padding:3px 10px; font-size:.85rem; font-weight:700; margin-right:6px;}

@media (max-width:640px){
  body{font-size:17px;}
  .site-header .container{flex-direction:column; align-items:flex-start;}
  .cta-block .btn-row{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ============================================================
   Soft CTA popup — non-intrusive by design:
   - small corner card, not full-screen, never covers main content
   - appears after a delay (set in popup.js), not on page load
   - easily dismissed, remembers dismissal for the browser session
   - complies with Google's mobile intrusive-interstitial guidance
   ============================================================ */
.soft-popup{
  position:fixed;
  right:20px; bottom:20px;
  max-width:340px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 34px rgba(16,30,27,.22);
  padding:20px 20px 18px;
  z-index:999;
  transform:translateY(140%);
  opacity:0;
  transition:transform .4s ease, opacity .4s ease;
  pointer-events:none;
}
.soft-popup.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.soft-popup-close{
  position:absolute; top:6px; right:8px;
  background:none; border:none;
  font-size:22px; line-height:1;
  color:#5B6663; cursor:pointer;
  padding:6px 8px;
}
.soft-popup-close:hover{color:var(--teal);}
.soft-popup-eyebrow{
  color:var(--gold); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 4px;
}
.soft-popup-title{
  font-family:'Fraunces',serif; font-size:1.1rem;
  color:var(--teal); margin:0 0 8px; line-height:1.25;
  padding-right:18px;
}
.soft-popup-body{font-size:.92rem; margin:0 0 14px; color:var(--ink);}
.soft-popup-actions{display:flex; gap:10px; flex-wrap:wrap;}
.soft-popup-actions .btn{padding:10px 16px; font-size:.92rem;}

@media (max-width:640px){
  .soft-popup{
    left:12px; right:12px; bottom:12px; max-width:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .soft-popup{transition:none;}
}