/* =========================================================
   FE BLINDADA — Centinela Católico
   Design tokens
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-950:#10192E;
  --navy-800:#1B2A4A;
  --navy-700:#233863;
  --navy-600:#2E4270;
  --gold-500:#C9A227;
  --gold-300:#E4C466;
  --gold-100:#F5E7B8;
  --cream-50:#FFFDF8;
  --cream-100:#F7F1E1;
  --ink:#1B2A4A;
  --ink-soft:#3E4C6B;

  --display: 'Cinzel', serif;
  --body: 'Cormorant Garamond', serif;
  --ui: 'Inter', sans-serif;

  --maxw: 1120px;
  --radius: 14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width: var(--maxw); margin:0 auto; padding: 0 24px;}
section{padding: 88px 0;}
@media (max-width:720px){ section{padding: 56px 0;} }

h1,h2,h3,.eyebrow{font-family: var(--display); letter-spacing: .02em;}
h2{font-size: clamp(28px, 4vw, 42px); font-weight:600; line-height:1.15; margin-bottom: 18px;}
h3{font-size: 22px; font-weight:600; margin-bottom: 8px;}
p{margin-bottom: 14px;}
.lede{font-size: 22px; color: var(--ink-soft); max-width: 640px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 13px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold-500); font-weight:600; margin-bottom: 18px;
}
.eyebrow::before{content:""; width:28px; height:1px; background: var(--gold-500);}

.on-navy{ color: var(--cream-100); }
.on-navy h2, .on-navy h3{ color: var(--cream-50); }
.on-navy .lede{ color: #C7D0E4; }

.bg-navy{ background: var(--navy-800); }
.bg-navy-deep{ background: var(--navy-950); }
.bg-cream{ background: var(--cream-100); }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--ui);
  font-weight:600; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 17px 34px; border-radius: 999px;
  border: none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-gold{
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  box-shadow: 0 10px 30px -10px rgba(201,162,39,.55);
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(201,162,39,.7); }
.btn-outline{
  background: transparent; color: var(--cream-50);
  border: 1px solid rgba(247,241,225,.4);
}
.btn-outline:hover{ border-color: var(--gold-300); color: var(--gold-300); }
.btn-block{ width:100%; }
.center{ text-align:center; }

/* ---------- Header / Urgency banner ---------- */
header{
  position: sticky; top:0; z-index: 50;
}
.urgency-header{
  background: linear-gradient(90deg, #7A2320, #9C2E2A);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.urgency-header .wrap{ padding: 13px 24px; display:flex; align-items:center; justify-content:center; }
.urgency-text{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--ui); font-weight:700; font-size:14.5px; color:#fff;
  letter-spacing:.01em; text-align:center; white-space:nowrap;
}
.urgency-text svg{ width:18px; height:18px; flex:none; color:#F4C542; }
@media (max-width:640px){
  .urgency-header .wrap{ padding: 10px 12px; }
  .urgency-text{ font-size: clamp(9.5px, 3.4vw, 12.5px); gap:6px; }
  .urgency-text svg{ width:13px; height:13px; }
}

/* ---------- Ray divider (signature element) ---------- */
.rays{
  height: 64px;
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.rays svg{ width: 220px; height: 56px; }

.cta-inline{ text-align:center; padding: 0 24px 48px; }
@media (max-width:640px){ .cta-inline{ padding: 0 18px 32px; } .cta-inline .btn{ width:100%; max-width:360px; } }

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(120% 140% at 50% -10%, #24365c 0%, var(--navy-950) 60%);
  padding-top: 48px;
  overflow: hidden;
  position: relative;
}
.hero .wrap{
  max-width: 640px;
  text-align: center;
}
.hero .eyebrow{ justify-content:center; }
.hero h1{
  font-family: var(--display); color: var(--cream-50);
  font-size: clamp(28px, 5.5vw, 46px); line-height:1.18; font-weight:700;
  margin-bottom: 26px;
}
.hero h1 em{ font-style:normal; color: var(--gold-300); }
.hero-img{ position:relative; margin: 34px auto; max-width: 420px; }
.hero-img::before{
  content:""; position:absolute; inset:-70px; z-index:-2;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 32%, transparent 68%);
  filter: blur(18px);
  pointer-events:none;
}
.hero-img::after{
  content:""; position:absolute; inset:-30px; z-index:-1;
  background: radial-gradient(circle at 50% 40%, rgba(228,196,102,.28), transparent 62%);
  filter: blur(4px);
  pointer-events:none;
}
.hero-img img{ width:100%; border-radius: 10px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(255,255,255,.16)); margin:0 auto; }
.hero .lede{ margin: 0 auto; }
.hero .actions{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;}
.hero .microcopy{ font-family: var(--ui); font-size:13px; color:#9FAAC4; margin-top:14px; }

.hook-bar{
  border-top: 1px solid rgba(201,162,39,.2);
  margin-top: 40px; padding: 20px 0 4px;
  font-family: var(--ui); font-size:14.5px; color:#C7D0E4;
  display:flex; align-items:center; justify-content:center; gap:12px; text-align:left;
}
.hook-bar svg{ flex:none; width:20px; height:20px; color: var(--gold-300); }

/* ---------- Pain scenarios ---------- */
.scenarios{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px;}
@media (max-width:880px){ .scenarios{ grid-template-columns:1fr; } }
.scenario{
  background: var(--cream-50); border:1px solid #EADFC2; border-radius: var(--radius);
  padding: 28px 26px;
}
.scenario .tag{ font-family: var(--ui); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-500); font-weight:600; margin-bottom:12px; display:block;}
.scenario p{ font-size:18px; color: var(--ink-soft); margin-bottom:0;}

/* ---------- Mechanism ---------- */
.mechanism-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top: 44px; }
@media (max-width: 880px){ .mechanism-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mechanism-steps{ grid-template-columns: 1fr; } }
.step{
  background: var(--navy-700); border-radius: var(--radius); padding: 26px 22px;
  border: 1px solid rgba(201,162,39,.2);
}
.step .num{ font-family: var(--display); color: var(--gold-300); font-size:14px; letter-spacing:.1em; margin-bottom:10px; display:block;}
.step h3{ color: var(--cream-50); font-size:19px; }
.step p{ color:#C7D0E4; font-size:16.5px; margin-bottom:0;}

/* ---------- Topics grid ---------- */
.topics{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top: 40px;}
@media (max-width:880px){ .topics{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .topics{ grid-template-columns: 1fr; } }
.topic{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid #EADFC2; border-radius: 12px; padding: 16px 18px;
}
.topic .n{ font-family: var(--display); color: var(--gold-500); font-size:15px; min-width:26px;}
.topic span.t{ font-family: var(--ui); font-size:15px; font-weight:600; color: var(--navy-800);}

/* ---------- What you get ---------- */
.offer-cards{ display:grid; grid-template-columns: 1.1fr .9fr .9fr; gap:24px; margin-top: 48px;}
@media (max-width:880px){ .offer-cards{ grid-template-columns:1fr; } }
.card{
  background: transparent; border:none; border-radius: var(--radius);
  overflow:visible; display:flex; flex-direction:column;
}
.card .imgwrap{ padding: 12px; display:flex; align-items:center; justify-content:center; min-height:240px; }
.card .imgwrap img{ filter: drop-shadow(0 14px 24px rgba(27,42,74,.18)); }
.card .body{ padding: 22px 24px 26px; }
.card .kicker{ font-family: var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-500); font-weight:700; margin-bottom:6px; display:block;}
.card.main{ grid-row: span 2; }
.card p{ color: var(--ink-soft); font-size:17px; margin-bottom:0;}

/* ---------- How to use (honest social proof) ---------- */
.usecases{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:44px;}
@media (max-width:880px){ .usecases{ grid-template-columns:1fr; } }
.usecase{ background: var(--navy-700); border-radius: var(--radius); padding:28px; border:1px solid rgba(201,162,39,.2);}
.usecase .icon{ width:40px; height:40px; margin-bottom:16px; color: var(--gold-300);}
.usecase h3{ color: var(--cream-50); font-size:19px;}
.usecase p{ color:#C7D0E4; font-size:16.5px; margin-bottom:0;}

/* ---------- Testimonials ---------- */
.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:44px;}
@media (max-width:880px){ .testimonials{ grid-template-columns:1fr; } }
.t-card{
  background: var(--navy-800); border:1px solid rgba(201,162,39,.28); border-radius: var(--radius);
  padding: 28px 26px; display:flex; flex-direction:column;
}
.t-stars{ display:flex; gap:3px; margin-bottom:14px; }
.t-stars svg{ width:16px; height:16px; color: var(--gold-300); }
.t-quote{ color:#DCE3F0; font-size:18px; font-style:italic; flex:1; margin-bottom:20px; }
.t-person{ display:flex; align-items:center; gap:12px; }
.t-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  overflow:hidden; border: 2px solid var(--gold-500);
}
.t-avatar img{ width:100%; height:100%; object-fit:cover; }
.t-avatar.initials{
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700; font-size:15px; color: var(--navy-950);
}
.t-name{ font-family: var(--ui); font-weight:600; font-size:15px; color:var(--cream-50); }
.t-role{ font-family: var(--ui); font-size:12.5px; color:#9FAAC4; }

/* ---------- Offer / price ---------- */
.price-box{
  max-width: 560px; margin: 44px auto 0; background: var(--cream-50);
  border: 1px solid #EADFC2; border-radius: 20px; padding: 40px 36px; text-align:center;
  box-shadow: 0 30px 70px -30px rgba(16,25,46,.25);
}
.price-row{ display:flex; align-items:baseline; justify-content:center; gap:14px; margin: 18px 0 6px;}
.price-old{ font-family: var(--ui); font-size:20px; color:#9AA3B8; text-decoration: line-through;}
.price-new{ font-family: var(--display); font-size:56px; color: var(--navy-800); font-weight:700;}
.price-new sup{ font-size:22px; top:-22px;}
.price-note{ font-family: var(--ui); font-size:13.5px; color: var(--ink-soft); margin-bottom: 26px;}
.includes{ text-align:left; margin: 0 0 28px; }
.includes li{ list-style:none; display:flex; gap:10px; align-items:flex-start; font-family: var(--ui); font-size:15px; color: var(--ink-soft); padding:7px 0;}
.includes li svg{ flex:none; width:18px; height:18px; color: var(--gold-500); margin-top:2px;}
.includes-sub{ font-size:12.5px; color:#8A93A8; line-height:1.4; margin-top:3px; font-weight:400; }

/* ---------- Guarantee ---------- */
.guarantee{ display:grid; grid-template-columns: auto 1fr; gap:36px; align-items:center; }
@media (max-width:720px){ .guarantee{ grid-template-columns:1fr; text-align:center; } .guarantee img{ margin:0 auto;} }
.guarantee img{ width:180px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid #EADFC2; padding: 22px 0; }
.faq-item summary{ cursor:pointer; font-family: var(--ui); font-weight:600; font-size:17px; color: var(--navy-800); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; color: var(--gold-500); transition: transform .2s;}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top:12px; color: var(--ink-soft); font-size:17px; }

.on-navy .faq-item{ border-bottom-color: rgba(201,162,39,.28); }
.on-navy .faq-item summary{ color: var(--cream-50); }
.on-navy .faq-item p{ color: #C7D0E4; }

/* ---------- Final CTA ---------- */
.final-cta{ text-align:center; }
.final-cta h2{ max-width: 700px; margin-left:auto; margin-right:auto; }

/* ---------- Footer ---------- */
footer{ background: var(--navy-950); padding: 36px 0 28px; }
footer .wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
footer .footer-logo{ width:120px; height:120px; margin-bottom:2px; position:relative; filter: drop-shadow(0 0 22px rgba(255,255,255,.28)) drop-shadow(0 0 10px rgba(228,196,102,.35)); }
footer .footer-story{ max-width:600px; display:flex; flex-direction:column; gap:12px; }
footer .footer-story p{ font-family: var(--body); font-size:16.5px; line-height:1.55; color:#C7D0E4; margin-bottom:0; }
footer .legal-disclaimer{ font-family: var(--ui); font-size:12.5px; color:#8B96AE; max-width:520px; margin: 8px 0 0; padding-top:18px; border-top:1px solid rgba(201,162,39,.2); }
footer .legal{ font-size:11.5px; color:#6B7690; margin-bottom:0; }
@media (max-width:640px){
  footer{ padding-top:28px; }
  footer .footer-logo{ width:92px; height:92px; }
  footer .footer-story p{ font-size:15px; }
}

.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 640px){
  body{ font-size: 17px; }
  section{ padding: 48px 0; }
  .wrap{ padding: 0 18px; }
  h2{ font-size: clamp(24px, 6vw, 32px); }
  .lede{ font-size: 18px; }

  .brand span{ font-size: 11.5px; letter-spacing:.05em; }
  .brand img{ width:28px; height:28px; }

  .hero{ padding-top: 18px; padding-bottom: 24px; }
  .hero .eyebrow{ font-size:10.5px; margin-bottom:8px; }
  .hero h1{ font-size: clamp(21px, 6.6vw, 28px); margin-bottom:12px; line-height:1.14; }
  .hero .lede{ font-size:14.5px; line-height:1.42; }
  .hero-img{ max-width: 100%; margin: 26px auto 30px; }
  .hero .actions .btn{ width:100%; padding:14px 22px; }
  .hero .microcopy{ margin-top:8px; font-size:11px; }
  .hook-bar{ margin-top:28px; font-size:13.5px; text-align:left; }

  .price-box{ padding: 28px 22px; }
  .price-new{ font-size: 42px; }
  .price-old{ font-size:16px; }

  .btn{ padding: 15px 26px; font-size:15px; }

  .rays{ height: 44px; }
  .rays svg{ width:150px; height:38px; }
}

@media (max-width: 380px){
  .brand span{ display:none; }
}