/* ====== MiAmor Global Theme (responsive + bottom nav on mobile) ====== */
:root{
  --brand:#0b64d8; --brand-dark:#084ca6; --text:#0f172a; --muted:#667085;
  --bg:#0a0a40; --bg-soft:#0f1840; --surface:#ffffff; --surface-soft:#ffffff12;
  --card:#112b57; --card2:#0b64d8; --cardText:#fff;
  --ok:#16a34a; --warn:#eab308; --danger:#dc2626;

  /* Layout sizes */
  --container:1120px;
  --radius:16px;

  /* Mobile bar sizes */
  --mobile-bar-h:64px;
  --tap:48px;
}

@font-face{font-family:"Poppins";font-display:swap;src:local("Poppins")}
@font-face{font-family:"Montserrat";font-display:swap;src:local("Montserrat")}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:#e6f2ff;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ===== Utilities ===== */
.section{max-width:var(--container);margin:0 auto;padding:2.25rem 1rem}
.card{border-radius:var(--radius);box-shadow:0 5px 16px rgba(2,6,23,.18);padding:1.25rem}
.card.light{background:#fff;color:var(--text)}
.card.dark{background:var(--card2);color:#fff}
.card.soft{background:var(--surface-soft);border:1px solid #1b427e}
.value-teasers{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0 1.1rem}
.teaser{border:1.5px solid #ffffffb3;border-radius:999px;padding:.4rem .75rem;font-weight:700}
.muted{color:#cbd5e1;font-size:.95rem}
a.under{color:#9bd3ff;text-decoration:underline}

/* Grids */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:1.25rem}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Lists */
.list{margin:.5rem 0 0;padding-left:1.1rem}
.list li{margin:.35rem 0}

/* Tables */
.table-wrap{overflow:auto;border-radius:12px;border:1px solid #1b427e}
.table{width:100%;border-collapse:collapse;background:#0f1840}
.table th,.table td{padding:.6rem .7rem;border-bottom:1px solid #1b427e;text-align:left;white-space:nowrap}
.table thead th{position:sticky;top:0;background:#1a3f7a;color:#cce6ff}
@media (max-width:560px){
  .table th,.table td{padding:.55rem .6rem}
}

/* Forms */
label{display:block;margin:.55rem 0 .35rem;font-weight:600;color:#d6e9ff}
input,select,textarea{
  width:100%;padding:.8rem .9rem;border:1px solid #e5e7eb;border-radius:10px;font-size:1rem;background:#fff;color:#111;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:#7bb6ff;box-shadow:0 0 0 4px rgba(123,182,255,.25)
}
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.85rem;flex-wrap:wrap}

/* Buttons */
.btn{
  background:#4f7ee8;color:#fff;padding:.75rem 1.15rem;border-radius:999px;
  text-decoration:none;font-weight:700;display:inline-block;min-height:var(--tap);line-height:1
}
.btn:hover{background:#3f6dd4}
.btn-outline{
  border:2px solid #e5efff;color:#e5efff;background:transparent;min-height:var(--tap);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.7rem 1.1rem;text-decoration:none
}
.btn-outline:hover{opacity:.9}

/* Share Bar */
.share-bar{display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:1rem 0}
.share-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:999px;border:1.5px solid #ffffffb3;background:transparent;color:#fff;text-decoration:none;font-weight:600;min-height:var(--tap)}
.share-btn.dark{border-color:#d0defa;color:#0b64d8;background:#eef4ff}

/* Trust block */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.trust .trust-item{display:flex;gap:.6rem;align-items:flex-start;background:#ffffff12;border:1px solid #1b427e;border-radius:14px;padding:1rem}
.trust .dot{width:.75rem;height:.75rem;border-radius:50%}
.trust .ok{background:var(--ok)} .trust .warn{background:var(--warn)} .trust .danger{background:var(--danger)}
@media (max-width:900px){.trust{grid-template-columns:1fr}}

/* ===== Headers ===== */
.header-slim{background:linear-gradient(180deg,rgba(11,100,216,.25),rgba(11,100,216,.08))}
.header-slim .wrap{max-width:var(--container);margin:0 auto;padding:2rem 1rem;text-align:center}
.header-slim h1{font-family:'Montserrat',sans-serif;margin:.25rem 0 .5rem;color:#cfe6ff}
.header-slim p{margin:0 auto 1rem;max-width:760px}

/* ===== Footer ===== */
.footer{background:#0a1024;color:#cbd5e1;margin-top:1rem}
.footer .wrap{max-width:var(--container);margin:0 auto;padding:2.25rem 1rem}
.footer a{color:#cbd5e1}
.copyright{opacity:.8;font-size:.9rem;margin-top:1rem}

/* ===== Top Nav (desktop) + Bottom Nav (mobile/tablet) ===== */
.nav-wrap{position:sticky;top:0;z-index:1000;background:#0a1024cc;backdrop-filter:saturate(140%) blur(6px)}
.nav{
  max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem
}
.brand{display:flex;gap:.5rem;align-items:center;text-decoration:none;color:#fff;font-weight:700}
.brand img{width:36px;height:36px}
.nav-menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav-menu a{color:#e5efff;text-decoration:none;font-weight:600}
.nav-menu .cta{background:#fff;color:#0b64d8;padding:.5rem .9rem;border-radius:999px}
.nav-menu .cta:hover{opacity:.9}

/* --- Bottom bar mode for touch devices (mobile + tablet) --- */
@media (max-width:1024px){
  /* make body padded so content doesn't hide behind bar */
  body{padding-bottom:calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px))}
  .nav-wrap{
    position:fixed;bottom:0;top:auto;left:0;right:0;
    border-top:1px solid #1b427e;
    background:rgba(10,16,36,.96);
    backdrop-filter:saturate(160%) blur(8px);
  }
  .nav{
    padding:.35rem .6rem;
  }
  .nav-menu{
    flex:1;justify-content:space-between;gap:.25rem;
  }
  .nav-menu li{flex:1}
  .nav-menu a{
    display:flex;align-items:center;justify-content:center;
    height:var(--mobile-bar-h); min-height:var(--tap);
    border-radius:12px; font-weight:700; font-size:.95rem;
  }
  .nav-menu .cta{
    background:#0b64d8;color:#fff;border:1px solid #2b6adf;padding:.5rem .75rem;
  }
  /* shrink brand label, keep icon visible on left */
  .brand span{display:none}
}

/* iOS safe-area padding for bottom bar */
@supports(padding:max(0px)){
  @media (max-width:1024px){
    .nav-wrap{padding-bottom:env(safe-area-inset-bottom)}
  }
}

/* Back to top button */
#backToTop{
  position:fixed;bottom:calc(var(--mobile-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  right:16px;background:#0056b3;color:#fff;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  text-decoration:none;font-size:18px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:999
}
#backToTop:hover{transform:scale(1.05);background:#003f7d}

/* ===== Hero (home) ===== */
.hero{position:relative;min-height:76vh;display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.45));z-index:-1}
.hero .content{max-width:920px;padding:3.2rem 1rem}
.hero h1{font-family:'Montserrat',sans-serif;font-size:clamp(1.9rem,4.6vw,3.2rem);margin:0 0 .65rem}
.hero p{font-size:clamp(1rem,2.3vw,1.12rem);margin:.25rem auto 1rem;line-height:1.7}
.kpis{opacity:.95;font-size:.95rem}

/* ===== Packages page extras (cards & pricing) ===== */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.price-card{border-radius:var(--radius);padding:1.25rem}
.price-card.dark{background:var(--card2);color:#fff}
.price-card.light{background:#fff;color:#0f172a}
.price-card h3{margin:.25rem 0 .5rem}
.price{font-size:1.8rem;font-weight:800;margin:.25rem 0 .5rem}
.badge{display:inline-block;border:1.5px solid #ffffffb3;border-radius:999px;padding:.35rem .6rem;font-weight:700;margin:.25rem .35rem .35rem 0}
.note{font-size:.95rem;opacity:.9}
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* Small-screen typography spacing */
@media (max-width:560px){
  .header-slim .wrap{padding:1.25rem 1rem}
  .section{padding:1.5rem 1rem}
  .btn,.btn-outline{padding:.7rem 1rem}
}
