/* ══════════════════════════════════════════════════════
   SAFE PROTECTION RIESGOS & SEGUROS LTDA.
   Global Stylesheet — v2.0 (2026)
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── TOKENS ── */
:root {
  --navy:    #0B2545;
  --steel:   #134074;
  --teal:    #1B6CA8;
  --accent:  #00B4D8;
  --cta:     #EE6C4D;
  --gold:    #C5992A;
  --cream:   #F7F4EF;
  --white:   #ffffff;
  --light:   #EEF4F8;
  --gray:    #64748b;
  --dark:    #1e293b;
  --radius:  16px;
  --shadow:  0 20px 60px rgba(11,37,69,.12);
  --shadow-sm: 0 4px 24px rgba(11,37,69,.08);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'DM Sans', sans-serif; background:var(--cream); color:var(--dark); overflow-x:hidden; }
h1,h2,h3,h4,.serif { font-family:'Cormorant Garamond', serif; }
img { max-width:100%; display:block; }
a { text-decoration:none; }
button { font-family:'DM Sans', sans-serif; cursor:pointer; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--steel); border-radius:99px; }

/* ── NAV ── */
#nav { position:fixed; top:0; left:0; right:0; z-index:1000; transition:.4s; }
#nav.scrolled { background:rgba(11,37,69,.97); backdrop-filter:blur(14px); box-shadow:0 4px 30px rgba(0,0,0,.25); }
.nav-inner { max-width:1280px; margin:0 auto; padding:0 32px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo img { height:52px; width:auto; }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { color:rgba(255,255,255,.85); font-size:13.5px; font-weight:500; letter-spacing:.3px; transition:color .2s; position:relative; padding-bottom:2px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:var(--accent); transition:width .3s; }
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { width:100%; }
.nav-cta { background:var(--cta); color:#fff !important; padding:10px 22px; border-radius:99px; font-size:13px; font-weight:600; border:none; transition:.3s; white-space:nowrap; }
.nav-cta:hover { background:#d4552e !important; transform:translateY(-1px); box-shadow:0 8px 24px rgba(238,108,77,.4); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
#mobile-menu { display:none; position:fixed; top:72px; left:0; right:0; background:var(--navy); z-index:999; padding:20px 24px; border-top:1px solid rgba(255,255,255,.08); }
#mobile-menu.open { display:block; }
#mobile-menu a { display:block; color:rgba(255,255,255,.85); padding:12px 0; font-size:15px; border-bottom:1px solid rgba(255,255,255,.06); }
#mobile-menu a:last-child { border:none; margin-top:12px; text-align:center; }

/* ── SECTION COMMON ── */
.section { padding:96px 32px; }
.section-inner { max-width:1280px; margin:0 auto; }
.section-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.section-title { font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--navy); line-height:1.1; margin-bottom:16px; }
.section-sub { font-size:16px; color:var(--gray); line-height:1.7; max-width:580px; font-weight:300; }
.section-header { margin-bottom:56px; }
.section-header.center { text-align:center; }
.section-header.center .section-sub { margin:0 auto; }

/* ── BUTTONS ── */
.btn-primary { background:var(--cta); color:#fff; padding:14px 28px; border-radius:99px; font-size:14px; font-weight:600; border:none; transition:.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:#d4552e; transform:translateY(-2px); box-shadow:0 12px 32px rgba(238,108,77,.4); }
.btn-ghost { background:transparent; color:#fff; padding:14px 28px; border-radius:99px; font-size:14px; font-weight:500; border:1.5px solid rgba(255,255,255,.3); transition:.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn-navy { background:var(--navy); color:#fff; padding:14px 28px; border-radius:99px; font-size:14px; font-weight:600; border:none; transition:.3s; display:inline-flex; align-items:center; gap:8px; }
.btn-navy:hover { background:var(--steel); transform:translateY(-2px); box-shadow:0 12px 32px rgba(11,37,69,.3); }

/* ── FORMS ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
label { font-size:12.5px; font-weight:600; color:var(--dark); letter-spacing:.3px; }
input, select, textarea { border:2px solid #e2e8f0; border-radius:10px; padding:11px 14px; font-size:14px; font-family:'DM Sans',sans-serif; color:var(--dark); transition:.2s; background:#fff; width:100%; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,180,216,.1); }
textarea { resize:vertical; min-height:80px; }

/* ── TOAST ── */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--navy); color:#fff; padding:13px 24px; border-radius:12px; font-size:14px; font-weight:500; z-index:9999; transition:transform .4s cubic-bezier(.4,0,.2,1); box-shadow:0 8px 32px rgba(0,0,0,.25); white-space:nowrap; pointer-events:none; }
#toast.show { transform:translateX(-50%) translateY(0); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(11,37,69,.6); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.3s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box { background:#fff; border-radius:24px; padding:36px; max-width:540px; width:100%; max-height:90vh; overflow-y:auto; transform:scale(.95); transition:.3s; }
.modal-overlay.open .modal-box { transform:scale(1); }
.modal-close { position:absolute; top:16px; right:16px; background:var(--light); border:none; width:32px; height:32px; border-radius:50%; font-size:18px; cursor:pointer; display:grid; place-items:center; color:var(--gray); transition:.2s; }
.modal-close:hover { background:#e2e8f0; color:var(--dark); }

/* ── FOOTER ── */
footer { background:var(--navy); color:rgba(255,255,255,.65); }
.footer-main { max-width:1280px; margin:0 auto; padding:64px 32px 40px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-brand p { font-size:13px; line-height:1.7; margin:16px 0; max-width:300px; }
.footer-logo { height:48px; width:auto; margin-bottom:4px; }
.footer-col h5 { color:#fff; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { color:rgba(255,255,255,.6); font-size:13px; transition:.2s; }
.footer-col ul li a:hover { color:#fff; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social a { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:9px; display:grid; place-items:center; color:rgba(255,255,255,.7); font-size:16px; transition:.2s; text-decoration:none; }
.footer-social a:hover { background:var(--accent); color:#fff; transform:translateY(-2px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 32px; max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; font-size:12px; flex-wrap:wrap; gap:8px; }

/* ── CHATBOT SOFÍA ── */
#chat-btn {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg, var(--teal), var(--accent));
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 8px 28px rgba(0,180,216,.45);
  z-index: 9000 !important;
  transition: .3s;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: visible;
}
#chat-btn:hover { transform: scale(1.1); box-shadow: 0 12px 36px rgba(0,180,216,.55); }
#chat-win {
  position: fixed !important;
  bottom: 104px !important;
  right: 28px !important;
  left: auto !important;
  width: 390px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(11,37,69,.22);
  z-index: 8999 !important;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(11,37,69,.08);
}
#chat-win.open { display: flex; animation: fadeUp .3s ease; }
.chat-head { background: linear-gradient(135deg, var(--navy), var(--teal)); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 40px; height: 40px; background: rgba(255,255,255,.15); border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; border: 2px solid rgba(255,255,255,.25); }
.chat-title { color: #fff; font-weight: 700; font-size: 14px; }
.chat-sub { color: rgba(255,255,255,.7); font-size: 11px; margin-top: 1px; }
#chat-close { margin-left: auto; background: rgba(255,255,255,.1); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; display: grid; place-items: center; transition: .2s; cursor: pointer; flex-shrink: 0; }
#chat-close:hover { background: rgba(255,255,255,.2); }
#chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 340px; }
.msg { display: flex; }
.msg-bot { justify-content: flex-start; }
.msg-user { justify-content: flex-end; }
.msg-bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.6; }
.msg-bot .msg-bubble { background: var(--light); color: var(--dark); border-radius: 4px 16px 16px 16px; }
.msg-user .msg-bubble { background: var(--navy); color: #fff; border-radius: 16px 16px 4px 16px; }
/* Typing dots */
.typing-dots { display: flex; align-items: center; gap: 5px; padding: 12px 16px !important; }
.typing-dots span { width: 7px; height: 7px; background: var(--gray); border-radius: 50%; animation: typingBounce 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }
#quick-btns { padding: 6px 14px 2px; display: flex; flex-direction: column; gap: 5px; }
.quick-btn { background: var(--light); border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--dark); text-align: left; transition: .2s; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.quick-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.chat-input-row { padding: 10px 14px; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; }
#chat-input { flex: 1; border: 2px solid #e2e8f0; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; transition: .2s; }
#chat-input:focus { outline: none; border-color: var(--accent); }
#chat-send { background: var(--navy); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 700; transition: .2s; cursor: pointer; }
#chat-send:hover { background: var(--teal); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; transform:scale(1.4); } }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── NORM LINK (tabla normativa) ── */
.norm-link { color:var(--steel); font-weight:600; text-decoration:none; font-size:13px; transition:color .2s; white-space:nowrap; }
.norm-link:hover { color:var(--accent); text-decoration:underline; }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.6); }
.breadcrumb a { color:rgba(255,255,255,.6); transition:.2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { color:rgba(255,255,255,.35); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .footer-main { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .section { padding:64px 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .footer-main { grid-template-columns:1fr; gap:32px; padding:40px 20px; }
  .footer-bottom { flex-direction:column; text-align:center; padding:16px 20px; }
  .form-grid { grid-template-columns:1fr; }
  #chat-win { width: calc(100vw - 40px) !important; right: 20px !important; left: auto !important; }
  #chat-btn { right: 20px !important; left: auto !important; bottom: 20px !important; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE COMPLETO — Mobile First v3.0
   ══════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ── */
@media (max-width:1024px) {
  .nav-inner { padding:0 20px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:32px; }
}

/* ── MOBILE (≤768px) ── */
@media (max-width:768px) {
  html { font-size:15px; }
  .section { padding:56px 18px; }
  .section-title { font-size:28px; }
  .section-sub { font-size:14px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-inner { height:64px; padding:0 18px; }
  .nav-logo img { height:44px; }
  #mobile-menu { top:64px; padding:16px 18px; }
  .btn-primary, .btn-ghost, .btn-navy { padding:12px 20px; font-size:13px; }
  .form-grid { grid-template-columns:1fr; gap:14px; }
  input, select, textarea { font-size:16px; }
  .footer-main { grid-template-columns:1fr; gap:28px; padding:36px 18px; }
  .footer-bottom { flex-direction:column; text-align:center; padding:14px 18px; gap:6px; }
  .footer-brand p { max-width:100%; }
  #chat-win { width:calc(100vw - 32px) !important; right:16px !important; left:auto !important; bottom:90px !important; }
  #chat-btn { right:16px !important; left:auto !important; bottom:16px !important; width:56px !important; height:56px !important; }
  #chat-msgs { max-height:260px; }
}

/* ── SMALL MOBILE (≤480px) ── */
@media (max-width:480px) {
  .section { padding:48px 16px; }
  .section-title { font-size:24px; }
  .nav-logo img { height:40px; }
  .footer-main { padding:28px 16px; }
  #chat-win { width:calc(100vw - 24px) !important; right:12px !important; }
  #chat-btn { right:12px !important; bottom:12px !important; }
}