@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#171512;
  --ink-soft:#25221d;
  --paper:#f2ede4;
  --paper-dim:#e6ded0;
  --safety:#ff5a1f;
  --safety-dim:#c9430f;
  --line:#3a352c;
  --ok:#3fae5c;
  --err:#d9463d;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif; line-height:1.55;
}
h1,h2,h3{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.02em; font-weight:700; margin:0 0 .5em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}

/* registration-mark signature motif, echoes print-press color registration crosshairs */
.mark{position:relative; display:inline-block; width:1em; height:1em;}
.section-title{
  font-size:2rem; margin-bottom:1.5rem; position:relative; padding-left:1.6rem;
}
.section-title::before{
  content:""; position:absolute; left:0; top:.15em; width:1.05rem; height:1.05rem;
  border:2px solid var(--safety); border-radius:50%;
}
.section-title::after{
  content:""; position:absolute; left:.5rem; top:0; width:2px; height:1.4rem; background:var(--safety);
}

/* topbar */
.topbar{background:var(--ink); color:var(--paper-dim); font-size:.85rem;}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:8px 20px; flex-wrap:wrap; gap:8px;}
.topbar a{color:var(--paper-dim);}
.topbar a:hover{color:var(--safety);}
.topbar-icons{display:flex; gap:1.2rem;}

/* main nav */
.mainnav{background:var(--paper); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:50;}
.mainnav-inner{display:flex; justify-content:space-between; align-items:center; padding:14px 20px;}
.logo img{height:44px;}

.btn{
  display:inline-block; padding:.8rem 1.6rem; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:var(--radius);
  border:2px solid var(--ink); cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--safety); color:var(--ink); border-color:var(--safety);}
.btn-primary:hover{background:var(--ink); color:var(--safety); border-color:var(--ink); transform:translateY(-2px);}
.btn-lg{padding:1rem 2.2rem; font-size:1.1rem;}

/* hero */
.hero{
  background-size:cover; background-position:center; position:relative; min-height:60vh;
  display:flex; align-items:center;
}
.hero-overlay{
  width:100%; background:linear-gradient(100deg, rgba(23,21,18,.92) 40%, rgba(23,21,18,.55));
  padding:5rem 0; color:var(--paper);
}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem); color:var(--paper); max-width:820px;}
.hero-tagline{font-size:1.2rem; max-width:560px; margin-bottom:2rem; color:var(--paper-dim);}

/* stats */
.stats{background:var(--ink); color:var(--paper);}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:2.5rem 20px; text-align:center;}
.stat-num{display:block; font-family:'Archivo Black',sans-serif; font-size:2.6rem; color:var(--safety);}
.stat span:last-child{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; color:var(--paper-dim);}

/* category grid */
.category-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; margin:2rem 0 3rem;
}
.category-card{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--ink);
  border:2px solid var(--ink); aspect-ratio:4/3;
}
.category-card img{width:100%; height:100%; object-fit:cover; opacity:.82; transition:transform .3s ease, opacity .3s ease;}
.category-card:hover img{transform:scale(1.06); opacity:1;}
.category-card-name{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem .8rem;
  background:linear-gradient(0deg, rgba(23,21,18,.95), transparent);
  color:var(--paper); font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  font-weight:700; font-size:1.1rem; letter-spacing:.03em;
}

/* process section */
.process{background:var(--paper-dim); padding:3.5rem 0; margin-top:2rem;}
.process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;}
.process h3{font-size:1.3rem; color:var(--safety-dim);}

/* seo text block */
.seo-block{padding:3rem 0; max-width:820px;}
.seo-block p{color:var(--ink-soft);}

/* category detail page */
.category-hero{background:var(--ink); color:var(--paper); padding:3rem 0 2.5rem;}
.category-hero h1{color:var(--paper); font-size:clamp(1.8rem,4vw,2.8rem);}
.breadcrumbs{font-size:.85rem; color:var(--paper-dim); margin-bottom:.8rem; text-transform:uppercase; letter-spacing:.05em;}
.breadcrumbs a{color:var(--safety);}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem auto;}
.gallery img{border-radius:var(--radius); aspect-ratio:4/3; object-fit:cover; border:2px solid var(--ink);}
.article{max-width:760px; margin:0 auto; padding:1rem 20px 2rem;}
.article p{margin-bottom:1.1rem; color:var(--ink-soft); font-size:1.05rem;}

/* contact page */
.contact-page{padding:3rem 0;}
.contact-page h1{font-size:2.4rem;}
.contact-methods{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; margin-top:2rem;}
.contact-card{
  background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:1.6rem; text-align:center;
  border:2px solid var(--ink); transition:border-color .15s ease, transform .15s ease;
}
.contact-card:hover{border-color:var(--safety); transform:translateY(-3px);}
.contact-icon{font-size:2rem; display:block; margin-bottom:.5rem;}
.contact-card strong{display:block; margin-top:.4rem; color:var(--safety);}
.contact-address{margin-top:2rem; color:var(--ink-soft);}

/* footer */
.footer{background:var(--ink); color:var(--paper-dim); margin-top:3rem; padding-top:2.5rem;}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding-bottom:2rem;}
.footer-logo{height:36px; margin-bottom:.8rem;}
.footer a{color:var(--paper-dim);}
.footer a:hover{color:var(--safety);}
.footer-social{display:flex; flex-direction:column; gap:.5rem;}
.footer-bottom{border-top:1px solid var(--line); padding:1rem 20px; font-size:.8rem; text-align:center;}

/* floating whatsapp button */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%;
  background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 4px 16px rgba(0,0,0,.35); z-index:60;
}

/* flash messages */
.flash{padding:.8rem 1rem; border-radius:var(--radius); margin:1rem 0; font-weight:600;}
.flash-success{background:#dff5e4; color:#1e6b34; border:1px solid var(--ok);}
.flash-error{background:#fbe1de; color:#8c231b; border:1px solid var(--err);}

/* ============ ADMIN ============ */
.admin-body{background:#eee9df; font-family:'Inter',sans-serif;}
.admin-login-box{
  max-width:360px; margin:8vh auto; background:#fff; padding:2.2rem; border-radius:6px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.admin-login-box h1{font-size:1.4rem; margin-bottom:1.2rem;}
.admin-login-box label, .admin-form label{display:block; font-weight:600; margin:.9rem 0 .3rem; font-size:.9rem; text-transform:none; font-family:'Inter',sans-serif;}
.admin-login-box input, .admin-form input, .admin-form textarea{
  width:100%; padding:.6rem .7rem; border:1px solid #ccc; border-radius:4px; font-family:inherit; font-size:.95rem;
}
.admin-login-box button, .admin-form button{margin-top:1.2rem;}

.admin-layout{display:flex; min-height:100vh;}
.admin-sidebar{width:220px; background:var(--ink); color:var(--paper); padding:1.5rem 1rem; flex-shrink:0;}
.admin-sidebar h2{font-size:1.1rem; color:var(--paper); margin-bottom:1.5rem;}
.admin-sidebar nav{display:flex; flex-direction:column; gap:.8rem;}
.admin-sidebar a{color:var(--paper-dim); font-size:.95rem;}
.admin-sidebar a:hover{color:var(--safety);}
.admin-content{flex:1; padding:2rem 2.5rem; max-width:900px;}
.admin-content h1{font-size:1.6rem; text-transform:none; font-family:'Inter',sans-serif; font-weight:700;}
.admin-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;}
.admin-table{width:100%; border-collapse:collapse; background:#fff; border-radius:6px; overflow:hidden;}
.admin-table th, .admin-table td{padding:.7rem .8rem; border-bottom:1px solid #eee; text-align:left; font-size:.9rem;}
.admin-thumb{width:60px; height:45px; object-fit:cover; border-radius:3px;}
.admin-form{background:#fff; padding:1.5rem 1.8rem; border-radius:6px; max-width:700px;}
.checkbox-label{display:flex; align-items:center; gap:.5rem; font-weight:500; margin-top:1rem;}
.checkbox-label input{width:auto;}
.link-btn{background:none; border:none; color:var(--err); cursor:pointer; font-size:.9rem; padding:0;}
.link-btn:hover{text-decoration:underline;}

@media (max-width:820px){
  .footer-inner{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr;}
  .admin-layout{flex-direction:column;}
  .admin-sidebar{width:100%;}
}