:root{ --brand:#0B108A; --ink:#0B108A; --paper:#ffffff; --muted:#6b7280; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:#0f172a;background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:0 auto;padding:64px 16px}

/* NAV (keeps base look) */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,16,138,.97);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px;color:#fff}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:auto;border-radius:6px}
.brand-name{font-family:Cinzel, serif;font-weight:700;letter-spacing:.04em}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:600;color:#fff}
.nav-links a:hover{background:rgba(255,255,255,.12)}
.btn-primary{background:#fff;color:var(--ink)}
.hamburger{display:none;margin-left:auto;background:transparent;border:0;color:#fff;font-size:28px;line-height:1;padding:8px;border-radius:8px}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;top:60px;right:16px;background:#0B108A;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px;flex-direction:column;min-width:240px}
  .nav-links.show{display:flex}
  .hamburger{display:block}
}

/* HERO */
.hero{background:linear-gradient(135deg, var(--brand), #0A0F70);color:#fff}
.hero-grid{display:grid;grid-template-columns:1.2fr;gap:24px;align-items:center;justify-items:center;text-align:center}
.logo-big{width:min(380px, 70vw);height:auto;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.headline{font-family:Cinzel, serif;font-size:clamp(28px,4vw,44px);letter-spacing:.04em;margin:12px 0 8px}
.subline{color: rgba(255, 255, 255, 0.92); /* blanco con 92% de opacidad */;margin:0 0 12px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.cta-row a{padding:10px 14px;border-radius:12px;font-weight:700}
.btn{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.3)}
.btn-outline{border:1px solid rgba(255,255,255,.7);color:#fff}

/* Sections */
section{scroll-margin-top:80px}
.kicker{color:var(--brand);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin-bottom:8px}
h2{font-family:Cinzel, serif;color:#0b0f2a;margin:0 0 10px;font-size:clamp(22px,3vw,30px)}
p{color:#334155;line-height:1.6;margin:0}
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid #e5e7eb;border-radius:16px;padding:18px;background:#fff;box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card h3{font-weight:700;color:var(--ink);margin:0 0 6px;font-size:18px}
.list{margin:8px 0 0;padding-left:18px;color:#334155}
.list li{margin:4px 0}
.section-alt{background:#f8fafc}

/* Footer */
footer{background:#f8fafc;border-top:1px solid #e5e7eb}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#475569}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:all .6s ease}
.reveal.show{opacity:1;transform:none}

/* Contact modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:20px;z-index:70}
.modal.show{display:flex}
.modal-card{background:#fff;color:#0f172a;border-radius:16px;max-width:560px;width:100%;padding:20px;box-shadow:0 20px 40px rgba(2,6,23,.3);margin-top:10vh}
.modal-card h3{margin:0 0 10px;color:#0B108A}
.input{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;margin:6px 0 10px}
textarea.input{min-height:120px;resize:vertical}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.btn-secondary{background:#e5e7eb}
.btn-primary-solid{background:#0B108A;color:#fff}
.success-msg{display:none;color:#16a34a;font-weight:700;margin-top:6px}
.error-msg{display:none;color:#dc2626;font-weight:700;margin-top:6px}


/* === JDC PATCH: CTA visibility + modal + mobile cards + explore link === */
#contactBtn, #contactBtnHero{ color:#0B108A !important; font-weight:700; }
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:flex-start; justify-content:center; padding:20px; z-index:1000; }
.modal.show{ display:flex; }
.modal-content{ background:#fff; color:#0f172a; border-radius:16px; max-width:560px; width:100%; padding:20px; margin-top:10vh; box-shadow:0 20px 40px rgba(2,6,23,.3); }
.modal .close{ float:right; font-size:18px; cursor:pointer; background:transparent; border:0; color:#0B108A; }
.modal-content form input,.modal-content form textarea{ width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; margin:6px 0 10px; font:inherit; }
.modal-content form textarea{ min-height:120px; resize:vertical; }
.modal-content form .button{ background:#0B108A; color:#fff; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; }
@media (max-width: 900px){
  .cards, .cards-grid, .solutions, .grid { display:grid !important; grid-template-columns:1fr !important; gap:16px !important; }
  .card, .solution-card, .tile, .box { width:100% !important; max-width:100% !important; }
  .card *, .solution-card *, .tile *, .box *{ overflow-wrap:anywhere; word-break:normal; hyphens:auto; }
}
.explore-inline{ font-size:.85em; font-weight:600; margin-left:.35rem; text-decoration:none; }
.explore-inline:hover{ text-decoration:underline; }