*{box-sizing:border-box}
:root{
  --green:#247a45;
  --green-dark:#165d34;
  --green-soft:#dfe9dc;
  --cream:#f6f3eb;
  --pastel:#edf1e8;
  --white:#ffffff;
  --ink:#2b2b29;
  --muted:#686863;
  --line:#2f7f4e;
  --container:1180px;
  --header-h:72px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"Poppins",Arial,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:30;
  height:var(--header-h);
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #ededeb;
  backdrop-filter:blur(12px);
}
.nav-wrap{
  width:min(calc(100% - 48px),900px);
  height:100%;margin:auto;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.mini-brand{
  position:absolute;left:0;
  width:38px;height:38px;border:1px solid var(--green);
  border-radius:50%;display:none;place-items:center;
  color:var(--green);font-family:"Cormorant Garamond",serif;font-weight:600;
}
.nav{display:flex;gap:74px;align-items:center;height:100%}
.nav a{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.035em;
  height:100%;display:grid;place-items:center;
  border-bottom:2px solid transparent;
  transition:.2s ease;
}
.nav a:hover,.nav a.active{color:var(--green);border-color:var(--green)}
.menu-toggle{
  display:none;position:absolute;right:0;
  border:0;background:none;font-size:24px;color:var(--green);cursor:pointer
}

/* HERO */
.hero{
  min-height:470px;height:min(48vw,650px);
  position:relative;
  display:grid;place-items:center;
  color:white;
  overflow:hidden;
  background:
    linear-gradient(120deg,#65816d,#b9b6a2 44%,#715d4b);
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("assets/hero.JPG");
  background-size:cover;
  background-position:center 46%;
  z-index:0;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(18,24,17,.28),rgba(18,24,17,.10),rgba(18,24,17,.30)),
    linear-gradient(0deg,rgba(14,20,14,.12),rgba(14,20,14,0) 48%);
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  padding:28px;
  text-shadow:0 2px 22px rgba(0,0,0,.25);
}
.hero-kicker{
  margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.28em;
  font-size:11px;font-weight:400
}
.hero h1{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;
  font-size:clamp(46px,5.8vw,82px);
  line-height:.96;font-weight:400;letter-spacing:.005em;
}

/* FIRMA */
.signature-band{
  min-height:150px;
  padding:20px 24px;
  display:grid;place-items:center;
  background:white;
}
.signature{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.signature-image{
  width:clamp(150px,18vw,215px);
  height:auto;
  object-fit:contain;
}
.signature-subtitle{
  display:block;
  margin-top:4px;
  padding-left:.48em;
  color:var(--green-dark);
  text-transform:uppercase;
  letter-spacing:.48em;
  font-size:9px;
  font-weight:500;
}

/* SECCIONES */
.section-soft{background:linear-gradient(180deg,var(--cream),#faf9f5)}
.about{padding:54px 0 76px}
.section-title-row{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:30px;
  margin:0 auto 46px;
}
.section-title-row>span{height:1px;background:var(--line);opacity:.65}
.section-title-row h2,.small-title h2{
  margin:0;
  color:var(--green);
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:42px;
}
.title-stack{text-align:center}
.title-stack p{margin:3px 0 0;font-size:18px;color:#53534e}

/* SOBRE MI */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;text-align:center}
.about-item{display:flex;flex-direction:column;align-items:center}
.about-item img{
  width:min(100%,300px);
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.about-item h3{
  margin:24px 0 14px;
  font-family:"Cormorant Garamond",serif;
  font-size:29px;font-weight:500;
}
.about-item p{
  max-width:300px;margin:0;
  color:#5f5f5a;font-size:15px;line-height:1.65;
}

/* LUGARES */
.places{padding:60px 0 70px;background:white}
.gallery-shell{
  position:relative;
  display:grid;grid-template-columns:52px 1fr 52px;
  align-items:center;gap:15px;
}
.gallery-viewport{overflow:hidden;outline:none}
.gallery-track{
  display:flex;
  transition:transform .48s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.painting{
  flex:0 0 100%;
  margin:0;padding:0 7px;
}
.painting img{
  width:100%;height:min(68vh,680px);object-fit:contain;
  background:#f7f5ef;
}
.gallery-arrow{
  width:48px;height:48px;border-radius:50%;
  border:1px solid #8daa94;background:white;
  color:var(--green-dark);
  font-family:Arial,sans-serif;
  font-size:34px;line-height:1;
  cursor:pointer;transition:.2s ease;z-index:2
}
.gallery-arrow:hover{background:var(--pastel);transform:scale(1.04)}
.gallery-meta{
  margin:20px 67px 0;
  display:flex;align-items:center;justify-content:space-between;
}
.gallery-meta p{
  margin:0;font-size:11px;letter-spacing:.15em;color:#777771
}
.gallery-note{
  margin:20px auto 0;text-align:center;color:#8a8a84;
  font-size:24px;max-width:760px;
}

/* CONTACTO */
.contact{padding:58px 0}
.contact-grid{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;
}
.small-title{display:flex;align-items:center;gap:22px}
.small-title h2{font-size:32px}
.small-title span{height:1px;background:var(--green);width:100px;opacity:.6}
.contact-intro>p{
  color:var(--muted);line-height:1.65;font-size:14px;max-width:330px
}
.contact-details{margin-top:28px;font-size:14px}
.contact-details a{color:var(--green-dark)}
.contact-form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:6px}
.contact-form label span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)
}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid #d4d4cf;background:white;
  padding:13px 14px;outline:0;border-radius:0;
  color:var(--ink)
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:#79a888;box-shadow:0 0 0 2px rgba(36,122,69,.08)
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a1a19b}
.contact-form textarea{resize:vertical}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-actions button{
  border:0;background:var(--green-dark);color:white;
  text-transform:uppercase;font-size:12px;letter-spacing:.025em;
  padding:13px 36px;cursor:pointer;transition:.2s
}
.form-actions button:hover{background:var(--green)}
.form-status{margin:0;font-size:11px;color:#85857f;line-height:1.5}

/* FOOTER */
footer{
  padding:20px;background:var(--pastel);
  text-align:center;color:#55705d;font-size:11px
}
footer p{margin:0}

/* RESPONSIVE */
@media(max-width:900px){
  .nav{gap:42px}
  .about-grid{gap:24px}
  .about-item img{width:240px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:680px){
  :root{--header-h:64px}
  .container{width:min(calc(100% - 30px),var(--container))}
  .nav-wrap{width:calc(100% - 30px);justify-content:flex-end}
  .mini-brand{display:grid}
  .menu-toggle{display:block}
  .nav{
    display:none;
    position:absolute;top:64px;left:-15px;right:-15px;height:auto;
    background:white;border-bottom:1px solid #e8e8e4;
    flex-direction:column;gap:0;padding:10px 18px 18px;
  }
  .nav.open{display:flex}
  .nav a{height:auto;width:100%;padding:12px 0;border-bottom:1px solid #f0f0ed}
  .hero{min-height:430px;height:66vh}
  .hero::before{
    background-position:42% center;
  }
  .hero h1{font-size:clamp(40px,12vw,64px)}
  .hero-content{padding-inline:18px}
  .signature-band{min-height:132px}
  .signature-image{width:170px}
  .section-title-row{gap:16px;margin-bottom:34px}
  .section-title-row h2{font-size:36px}
  .about{padding:42px 0 54px}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .about-item img{width:min(78vw,300px)}
  .painting img{height:min(118vw,520px)}
  .gallery-shell{
    grid-template-columns:1fr;
  }
  .gallery-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;background:rgba(255,255,255,.9)
  }
  .gallery-arrow:hover{transform:translateY(-50%) scale(1.04)}
  .gallery-prev{left:8px}
  .gallery-next{right:8px}
  .gallery-meta{margin-inline:0}
  .form-row{grid-template-columns:1fr}
}

.gallery-counter-only{
  justify-content:center;
  margin-top:22px;
}
.gallery-counter-only p{
  font-size:13px;
  letter-spacing:.18em;
  color:#777771;
}
.gallery-counter-only #slideCurrent{
  color:var(--green-dark);
  font-weight:500;
}
.counter-separator{
  margin:0 7px;
  color:#aaa9a3;
}