/* ==========================================================================
   MARMOLINES — Piedra natural, instalación e imagen de marca
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --bg:#0c0b09;
  --bg-alt:#141210;
  --cream:#f6f1e6;
  --cream-2:#efe7d6;
  --ink:#1a1611;
  --ink-soft:#57503f;
  --brass:#EFBF04;
  --brass-light:#EFBF04;
  --line-dark: rgba(220,181,113,0.22);
  --line-light: rgba(26,22,17,0.12);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Archivo', Arial, sans-serif;
  --max: 1200px;
  --nav-h: 84px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  animation:page-in .6s var(--ease) both;
}
@keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--brass);
}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  margin-top:14px;
  color:var(--ink);
}
.section-head p{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:46ch;
}
.section-head.on-dark h2{ color:var(--cream); }
.section-head.on-dark p{ color:#bdb4a2; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 26px;
  border-radius:2px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-brass{
  background:var(--brass);
  color:#171008;
}
.btn-brass:hover{ background:var(--brass-light); }
.btn-outline{
  background:transparent;
  border-color:rgba(246,241,230,.4);
  color:var(--cream);
}
.btn-outline:hover{ border-color:var(--cream); background:rgba(246,241,230,.08); }
.btn-outline-dark{
  background:transparent;
  border-color:rgba(26,22,17,.25);
  color:var(--ink);
}
.btn-outline-dark:hover{ border-color:var(--ink); background:rgba(26,22,17,.05); }
.btn-block{ width:100%; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;
  top:18px;
  left:18px;
  right:18px;
  z-index:100;
  display:flex;
  justify-content:center;
}
.nav{
  width:100%;
  max-width:calc(var(--max) + 40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:10px 18px;
  border-radius:6px;
  background:rgba(12,11,9,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(246,241,230,.14);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled .nav{
  background:rgba(12,11,9,.88);
  border-color:rgba(246,241,230,.1);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.brand img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 42%;
  border:1px solid var(--line-dark);
}
.brand span{
  font-family:var(--font-display);
  font-size:1.28rem;
  color:var(--cream);
  letter-spacing:.01em;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e7dfcd;
  padding:6px 2px;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background:var(--brass-light);
  transition:right .3s var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-actions .btn{ min-height:42px; padding:0 20px; font-size:.76rem; }

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(246,241,230,.25);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  position:absolute;
  left:12px; right:12px;
  height:1px;
  background:var(--cream);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span{ top:50%; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.is-active span{ background:transparent; }
.nav-toggle.is-active span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span::after{ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:99;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu a{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--cream);
}
.mobile-menu .btn{
  margin-top:10px;
  white-space:normal;
  max-width:82vw;
  text-align:center;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:var(--bg);
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-slideshow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.8s var(--ease);
}
.hero-slide.is-active{ opacity:1; z-index:1; }
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  animation:hero-kenburns 16s ease-in-out infinite alternate;
}
@keyframes hero-kenburns{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.1); }
}
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:2;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.hero-media.is-ready{ opacity:1; }
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.32) 38%, rgba(10,9,7,.72) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  padding:0 80px;
}
@media (max-width: 768px) {
  .hero-content{
    position: relative;
    top: 80px; /* Baja todo 80px */
  }
}
.hero-content .eyebrow{ color:var(--brass-light); margin-bottom:22px; }
.hero-content h1{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size:clamp(3.4rem, 10vw, 7.4rem);
  color:var(--cream);
  line-height:.96;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.25))
    drop-shadow(0 10px 25px rgba(0,0,0,0.18));
}
.hero-content .tagline{
  margin-top:22px;
  color:#d9d0bd;
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  max-width:38ch;
  font-weight:400;
}
.hero-actions{
  display:flex;
  gap:16px;
  margin-top:42px;
  flex-wrap:wrap;
  justify-content:center;
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:#d9d0bd;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.scroll-cue .line{
  width:1px;
  height:44px;
  background:rgba(246,241,230,.35);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:'';
  position:absolute;
  top:-100%; left:0; right:0;
  height:100%;
  background:var(--brass-light);
  animation:scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ---------- Reveal on scroll (utilidad general) ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }

.product-grid .product-card:nth-child(1){ transition-delay:0ms; }
.product-grid .product-card:nth-child(2){ transition-delay:90ms; }
.product-grid .product-card:nth-child(3){ transition-delay:180ms; }
.product-grid .product-card:nth-child(4){ transition-delay:270ms; }
.product-grid .product-card:nth-child(5){ transition-delay:360ms; }

.install-grid .install-media:nth-child(1){ transition-delay:0ms; }
.install-grid .install-media:nth-child(2){ transition-delay:150ms; }

/* ---------- Reveal / parallax panels ---------- */
.material{
  background:var(--bg);
  padding:110px 0 40px;
  overflow:hidden;
}
.material .container{ padding:0 32px; }

.reveal-panel{
  position:relative;
  height:64vh;
  min-height:380px;
  max-height:620px;
  margin-bottom:26px;
  overflow:hidden;
  border-radius:4px;
  clip-path:inset(0 0 0 0);
}
.reveal-panel .panel-mask{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease);
}
.reveal-panel.dir-r .panel-mask{ clip-path:inset(0 0 0 100%); }
.reveal-panel.is-visible .panel-mask{ clip-path:inset(0 0 0 0); }

.reveal-panel img{
  position:absolute;
  top:-8%;
  left:0;
  width:100%;
  height:116%;
  object-fit:cover;
  will-change:transform;
}
.reveal-panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(8,7,6,.62) 0%, rgba(8,7,6,0) 42%);
  z-index:1;
  pointer-events:none;
}
.panel-caption{
  position:absolute;
  left:28px;
  bottom:22px;
  z-index:2;
  color:var(--cream);
  display:flex;
  align-items:baseline;
  gap:14px;
}
.panel-caption .num{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--brass-light);
  font-size:1.1rem;
}
.panel-caption .txt{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
}

/* ---------- Productos ---------- */
.productos{ background:var(--cream); padding:110px 0; }
.product-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
}
.product-card{
  flex:1 1 300px;
  max-width:352px;
  background:#fffdf9;
  border:1px solid var(--line-light);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px rgba(26,22,17,.12);
}
.product-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink);
  cursor:pointer;
}
.product-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-media::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(12,11,9,0);
  transition:background-color .3s var(--ease);
}
.product-media:hover::after{ background:rgba(12,11,9,.14); }
.product-media:focus-visible{ outline:2px solid var(--brass-light); outline-offset:-2px; }
.product-media .zoom-icon{
  position:absolute;
  right:10px; bottom:10px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(12,11,9,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.7);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:2;
}
.product-media:hover .zoom-icon{ opacity:1; transform:scale(1); }
.product-media .zoom-icon svg{ width:14px; height:14px; stroke:var(--cream); }
.product-price{
  position:absolute;
  top:14px; right:14px;
  background:rgba(12,11,9,.82);
  color:var(--brass-light);
  font-size:.8rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:2px;
  letter-spacing:.02em;
}
.product-price small{ color:#cfc6b4; font-weight:400; font-size:.68rem; text-transform:none; }
.product-body{
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.product-body h3{ font-size:1.28rem; color:var(--ink); }
.product-body p{ color:var(--ink-soft); font-size:.92rem; line-height:1.55; }
.product-body .btn{ margin-top:auto; }

/* ---------- Instalación ---------- */
.instalacion{
  background:var(--bg-alt);
  padding:110px 0;
  position:relative;
}
.instalacion .container{ position:relative; z-index:1; }
.install-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:10px;
}
.install-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:4px;
}
.install-media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.35) contrast(1.03);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.install-media:hover img{ filter:grayscale(0) contrast(1.05); transform:scale(1.04); }
.install-stats{
  display:flex;
  gap:48px;
  margin-top:52px;
  flex-wrap:wrap;
}
.install-stats div strong{
  display:block;
  font-family:var(--font-display);
  font-size:2.2rem;
  color:var(--brass-light);
}
.install-stats div span{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bdb4a2;
}

/* ---------- Galería ---------- */
.galeria{ background:var(--cream); padding:110px 0; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.gallery-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:3px;
  cursor:pointer;
  background:#e6ddc9;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(12,11,9,0);
  transition:background-color .3s var(--ease);
}
.gallery-item:hover::after{ background:rgba(12,11,9,.14); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .zoom-icon{
  position:absolute;
  right:10px; bottom:10px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(12,11,9,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.7);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.gallery-item:hover .zoom-icon{ opacity:1; transform:scale(1); }
.gallery-item .zoom-icon svg{ width:14px; height:14px; stroke:var(--cream); }

.gallery-more{
  margin-top:36px;
  display:flex;
  justify-content:center;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(8,7,6,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-figure{
  position:relative;
  max-width:min(90vw, 1100px);
  max-height:86vh;
}
.lightbox-figure img{
  max-width:100%;
  max-height:86vh;
  object-fit:contain;
  border-radius:2px;
}
.lightbox-close, .lightbox-nav{
  position:absolute;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(246,241,230,.25);
  background:rgba(12,11,9,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--cream);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(183,135,63,.28); border-color:var(--brass-light); }
.lightbox-close{ top:-58px; right:0; }
.lightbox-nav svg, .lightbox-close svg{ width:18px; height:18px; stroke:currentColor; }
.lightbox-prev{ left:-64px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:-64px; top:50%; transform:translateY(-50%); }
.lightbox-counter{
  position:absolute;
  bottom:-38px; left:0;
  font-size:.78rem;
  letter-spacing:.08em;
  color:#bdb4a2;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink);
  padding:80px 0;
  text-align:center;
}
.cta-band h2{ color:var(--cream); font-size:clamp(1.8rem, 3vw, 2.4rem); }
.cta-band p{ color:#bdb4a2; margin-top:14px; }
.cta-band .btn{ margin-top:30px; }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--bg);
  padding:64px 0 26px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:48px;
  border-bottom:1px solid var(--line-dark);
}
.webdesign-link {
  color: #51d1f6;
  text-decoration: underline;
  font-weight: 700;
}

.footer-brand{ max-width:320px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:#a89f8d; font-size:.92rem; }
.footer-cols{
  display:flex;
  gap:64px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin-bottom:16px;
  font-weight:600;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a, .footer-col span{ color:#cfc6b4; font-size:.92rem; }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{
  padding-top:22px;
  padding-right:80px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  color:#78715f;
  font-size:.78rem;
}
.footer-bottom a{ color:#78715f; }
.footer-bottom a:hover{ color:var(--brass-light); }
.footer-copy{ text-align:left; }
.footer-admin{ justify-self:center; text-align:center; }
.footer-credit{ justify-self:end; text-align:right; margin:0; white-space:nowrap; }
@media (max-width:640px){
  .footer-bottom{
    grid-template-columns:1fr;
    justify-items:center;
    padding-right:0;
    text-align:center;
  }
  .footer-copy, .footer-admin, .footer-credit{ justify-self:center; text-align:center; white-space:normal; }
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px; height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:90;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-actions .btn:not(.nav-toggle){ display:none; }
  .nav-toggle{ display:block; }
  .install-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:10px; right:10px; }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  .site-header{ left:12px; right:12px; top:12px; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .reveal-panel{ height:46vh; min-height:300px; }
  .install-stats{ gap:30px; }
  .footer-cols{ gap:36px; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal-panel .panel-mask{ clip-path:inset(0 0 0 0) !important; }
}

/* ==========================================================================
   Admin page
   ========================================================================== */
.admin-body{
  background:var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
.admin-card{
  width:100%;
  max-width:400px;
  background:var(--bg-alt);
  border:1px solid var(--line-dark);
  border-radius:6px;
  padding:44px 36px;
}
.admin-card .brand{ justify-content:center; margin-bottom:28px; }
.admin-card h1{
  font-size:1.6rem;
  color:var(--cream);
  text-align:center;
  margin-bottom:6px;
}
.admin-card .sub{
  text-align:center;
  color:#a89f8d;
  font-size:.88rem;
  margin-bottom:30px;
}
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bdb4a2;
  margin-bottom:8px;
}
.field input{
  width:100%;
  height:46px;
  padding:0 14px;
  background:#0f0d0a;
  border:1px solid rgba(246,241,230,.16);
  border-radius:3px;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:.94rem;
}
.field input:focus{
  outline:none;
  border-color:var(--brass-light);
}
.admin-error{
  color:#e07a6b;
  font-size:.82rem;
  margin:-6px 0 16px;
  min-height:1em;
}
.admin-hint{
  margin-top:22px;
  text-align:center;
  font-size:.76rem;
  color:#7c745f;
  line-height:1.6;
}
.admin-hint strong{ color:#a89f8d; }

.admin-dashboard{
  max-width:1080px;
  margin:0 auto;
  padding:52px 24px 100px;
}
.admin-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
  gap:16px;
  flex-wrap:wrap;
}
.admin-upload{
  background:var(--bg-alt);
  border:1px dashed rgba(246,241,230,.25);
  border-radius:6px;
  padding:32px;
  margin-bottom:44px;
  text-align:center;
}
.admin-upload input[type=file]{
  display:block;
  margin:18px auto 0;
  color:#cfc6b4;
  font-size:.86rem;
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}
.admin-thumb{
  position:relative;
  aspect-ratio:1/1;
  border-radius:4px;
  overflow:hidden;
  background:#1c1914;
}
.admin-thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-thumb .tag{
  position:absolute;
  left:8px; top:8px;
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(12,11,9,.7);
  color:var(--brass-light);
  padding:3px 8px;
  border-radius:2px;
}
.admin-thumb .remove{
  position:absolute;
  right:8px; top:8px;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(12,11,9,.7);
  border:none;
  color:var(--cream);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-thumb .remove:hover{ background:#8a2e22; }
.admin-thumb .remove svg{ width:13px; height:13px; stroke:currentColor; }
.admin-empty{
  color:#7c745f;
  font-size:.9rem;
  text-align:center;
  padding:20px 0;
}
.admin-session{
  color:#a89f8d;
  font-size:.82rem;
  letter-spacing:.02em;
}
.admin-credentials{
  max-width:480px;
  margin:72px auto 0;
  padding-top:44px;
  border-top:1px solid var(--line-dark);
}
.admin-success{ color:#8fbf8f !important; }