/* ═══════════════════════════════════════════════════════════
   CADBOTIC — shared stylesheet for interior pages
   (index.html keeps its own inlined critical CSS)
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Nasalization';
  src: url('../../Nasalization Rg.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --g:      #10B981;
  --gd:     #059669;
  --gl:     #D1FAE5;
  --gll:    #F0FDF4;
  --glow:   rgba(16,185,129,0.18);
  --ink:    #0F1F17;
  --ink2:   #374151;
  --muted:  #6B7280;
  --border: #E5E7EB;
  --snow:   #F8FAFB;
  --white:  #FFFFFF;
  --scene:  #0b1510;
  --r:      14px;
  --ff:     'Outfit', sans-serif;
  --fn:     'Nasalization', sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--ink);background:var(--white);overflow-x:hidden;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--gd)}

/* ── SKIP LINK (a11y) ── */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--g);color:#fff;padding:.6rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ── NAV ── */
#nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);padding:.85rem 3rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:.7rem}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-word{font-family:var(--fn);font-size:1.35rem;color:var(--ink);letter-spacing:.04em}
.logo-slogan{font-size:.58rem;font-weight:600;color:var(--g);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links a{font-size:.87rem;font-weight:500;color:var(--ink2);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--g)}
.nav-cta{background:var(--g);color:#fff!important;padding:.55rem 1.4rem;border-radius:50px;font-weight:600!important;box-shadow:0 4px 14px var(--glow)}
.nav-cta:hover{background:var(--gd)}
.ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.ham span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px}
.mob{display:none;position:fixed;inset:0;z-index:950;background:var(--white);flex-direction:column;align-items:center;justify-content:center;gap:1.6rem}
.mob.open{display:flex}
.mob a{font-family:var(--fn);font-size:1.5rem;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.mob a:hover{color:var(--g)}
.mob-x{position:absolute;top:1.5rem;right:2rem;background:none;border:none;font-size:2rem;cursor:pointer;color:var(--muted)}

/* ── PAGE HEADER ── */
.phead{background:linear-gradient(135deg,#0b1a11 0%,#0d2b1a 55%,#091510 100%);color:#fff;padding:3.4rem 3rem 3rem;position:relative;overflow:hidden}
.phead::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,rgba(16,185,129,.16),transparent 70%)}
.phead .inn{position:relative;z-index:1}
.crumbs{font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{color:rgba(255,255,255,.55);text-decoration:none}
.crumbs a:hover{color:var(--g)}
.crumbs li+li::before{content:'/';margin-right:.4rem;color:rgba(255,255,255,.22)}
.phead h1{font-family:var(--fn);font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:.02em;margin-bottom:.9rem}
.phead h1 em{color:var(--g);font-style:normal}
.phead p{color:rgba(255,255,255,.6);font-size:.98rem;max-width:640px;font-weight:300}
.phead .btnrow{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* ── SECTIONS ── */
.sec{padding:4.5rem 3rem}
.sec.alt{background:var(--snow)}
.sec.mint{background:var(--gll);border-top:1px solid var(--gl);border-bottom:1px solid var(--gl)}
.inn{max-width:1080px;margin:0 auto}
.tag{display:inline-flex;align-items:center;gap:.45rem;color:var(--g);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.75rem}
.tag::before{content:'';width:16px;height:2px;background:var(--g)}
h2.t{font-family:var(--fn);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--ink);line-height:1.18;letter-spacing:.02em;margin-bottom:.75rem}
h3.t3{font-family:var(--fn);font-size:1.02rem;color:var(--ink);letter-spacing:.02em;margin-bottom:.45rem}
.sub{color:var(--muted);font-size:.93rem;line-height:1.8;max-width:640px;font-weight:300}
.prose{max-width:720px}
.prose p{color:var(--ink2);font-size:.92rem;line-height:1.85;margin-bottom:1rem}
.prose ul{margin:0 0 1.2rem 1.1rem;color:var(--ink2);font-size:.92rem;line-height:1.85}
.prose li{margin-bottom:.3rem}
.prose h3{font-family:var(--fn);font-size:1.05rem;margin:1.8rem 0 .6rem;letter-spacing:.02em}

/* ── CARDS / GRIDS ── */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin-top:2.6rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
.card{background:var(--white);border-radius:var(--r);padding:1.9rem;border:1px solid var(--border);transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(0,0,0,.07);border-color:var(--gl)}
.card h3{font-family:var(--fn);font-size:1rem;color:var(--ink);margin-bottom:.5rem;letter-spacing:.02em}
.card p{font-size:.85rem;color:var(--muted);line-height:1.75;font-weight:300}
.card .ico{width:50px;height:50px;background:var(--gl);border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.card .ico svg{width:23px;height:23px;color:var(--gd)}
.chips{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.35rem}
.chips span{font-size:.68rem;background:var(--gll);color:var(--gd);padding:.18rem .65rem;border-radius:50px;font-weight:600}
.card-link{display:inline-block;margin-top:1rem;font-size:.8rem;font-weight:600;color:var(--gd);text-decoration:none}
.card-link:hover{text-decoration:underline}

/* ── MEDIA CARD (gallery / models) ── */
.mcard{background:var(--white);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;transition:transform .3s,box-shadow .3s}
.mcard:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(0,0,0,.08)}
.mcard figure{margin:0;position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#0d2b1a,#1a4a2a);overflow:hidden}
.mcard figure img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .body{padding:1.2rem}
.mcard h3{font-family:var(--fn);font-size:.92rem;color:var(--ink);margin-bottom:.3rem;letter-spacing:.02em}
.mcard .meta{font-size:.76rem;color:var(--muted);margin-bottom:.8rem;line-height:1.6}
.mcard .ft{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.price{font-family:var(--fn);font-size:1.05rem;color:var(--g)}
.badge{position:absolute;top:.75rem;left:.75rem;z-index:2;background:var(--g);color:#fff;font-size:.64rem;font-weight:700;padding:.2rem .65rem;border-radius:50px;letter-spacing:.05em}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:50px;font-weight:600;font-size:.86rem;padding:.72rem 1.6rem;text-decoration:none;cursor:pointer;border:none;transition:all .25s;font-family:var(--ff)}
.btn-g{background:var(--g);color:#fff;box-shadow:0 6px 20px var(--glow)}
.btn-g:hover{background:var(--gd);transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-o:hover{border-color:var(--g);color:var(--g)}
.btn-ol{background:transparent;color:var(--gd);border:1px solid var(--gl)}
.btn-ol:hover{border-color:var(--g);background:var(--gll)}
.btn-sm{padding:.42rem .95rem;font-size:.76rem;background:var(--gll);color:var(--gd);border-radius:50px;font-weight:600;text-decoration:none;display:inline-block}
.btn-sm:hover{background:var(--g);color:#fff}
.btn-wa{display:inline-flex;align-items:center;gap:.55rem;background:#25D366;color:#fff;padding:.85rem 2rem;border-radius:50px;font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:0 8px 28px rgba(37,211,102,.35);transition:all .3s}
.btn-wa:hover{transform:translateY(-3px)}
.btn-wa svg{width:19px;height:19px}

/* ── DEFINITION LIST / SPECS ── */
.specs{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.86rem}
.specs th,.specs td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--border);vertical-align:top}
.specs th{font-weight:600;color:var(--ink);width:34%}
.specs td{color:var(--muted)}
.tablewrap{overflow-x:auto}

/* ── FAQ ── */
.faq{margin-top:2.4rem;max-width:820px}
.faq details{border:1px solid var(--border);border-radius:12px;padding:1.05rem 1.25rem;margin-bottom:.7rem;background:var(--white);transition:border-color .2s}
.faq details[open]{border-color:var(--gl);background:var(--gll)}
.faq summary{font-weight:600;font-size:.92rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--g);font-size:1.2rem;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:.8rem;font-size:.88rem;color:var(--ink2);line-height:1.8}

/* ── CTA STRIP ── */
.cta{padding:4.6rem 3rem;text-align:center;background:linear-gradient(135deg,#0b1a11 0%,#0d2b1a 50%,#091510 100%);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 50%,rgba(16,185,129,.15),transparent 70%)}
.cta .inn{position:relative;z-index:1;max-width:600px}
.cta h2{font-family:var(--fn);font-size:clamp(1.5rem,2.6vw,2.2rem);color:#fff;letter-spacing:.02em;line-height:1.18;margin-bottom:.9rem}
.cta p{color:rgba(255,255,255,.5);font-size:.92rem;line-height:1.75;margin-bottom:2rem}

/* ── FOOTER ── */
#foot{background:#0b1510;padding:3.6rem 3rem 2rem}
.f-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.4rem;margin-bottom:2.4rem}
.f-logo-word{font-family:var(--fn);color:#fff;font-size:1.2rem;letter-spacing:.04em}
.f-logo-tag{font-size:.6rem;color:var(--g);letter-spacing:.14em;text-transform:uppercase;margin-top:3px;font-weight:600}
.f-desc{color:rgba(255,255,255,.32);font-size:.82rem;line-height:1.75;margin-top:.8rem;max-width:260px}
.f-col-t{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.f-col a{color:rgba(255,255,255,.34);font-size:.82rem;text-decoration:none;transition:color .2s}
.f-col a:hover{color:var(--g)}
.f-bot{max-width:1080px;margin:0 auto;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.f-copy,.f-made{font-size:.75rem;color:rgba(255,255,255,.22)}
.f-made span{color:var(--g)}

/* ── WHATSAPP FLOAT ── */
#wa{position:fixed;bottom:1.6rem;right:1.6rem;z-index:800;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 8px 28px rgba(37,211,102,.45);transition:transform .2s}
#wa:hover{transform:scale(1.08)}
#wa svg{width:26px;height:26px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:768px){
  #nav{padding:.8rem 1.5rem}
  .nav-links{display:none}
  .ham{display:flex}
  .phead{padding:2.4rem 1.5rem 2.2rem}
  .sec,.cta{padding:3.2rem 1.5rem}
  .grid2,.grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}
  #foot{padding:3rem 1.5rem 2rem}
  .f-grid{grid-template-columns:1fr;gap:1.8rem}
  .f-bot{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}