@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#fafafa;color:#111}
/*
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 48px;
  border-bottom:1px solid #e5e5e5;
  background:#fff;
  position:sticky;
  top:0;z-index:10}*/
  .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* ajusta según tu header real */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  z-index: 999;
  background: #fff; /* o transparente si quieres efecto overlay */
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.header.visible {
  transform: translateY(0);
}

.logo{height:42px}
.logo-hero{height:120px}
.contact-btn{background:#111;color:#fff;padding:10px 20px;border-radius:24px;text-decoration:none;font-size:14px;transition:all .3s}
.contact-btn:hover{background:#000;transform:translateY(-2px)}

.container{max-width:1200px;margin:auto;padding:60px 24px}

.links{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:60px}
.link-box{border:1px solid #111;border-radius:18px;padding:30px;text-align:center;text-decoration:none;color:#111;font-weight:500;transition:all .3s;background:#fff}
.link-box:hover{background:#111;color:#fff;transform:translateY(-6px)}

.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.card{background:#fff;border-radius:22px;padding:20px;transition:all .4s;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.card:hover{box-shadow:0 25px 60px rgba(0,0,0,.12);transform:translateY(-6px)}

.slider{position:relative;overflow:hidden;border-radius:16px}
.slider img{width:100%;position:absolute;inset:0;opacity:0;transition:opacity .6s}
.slider img.active{opacity:1;position:relative}

.dots{display:flex;justify-content:center;gap:10px;margin:14px 0}
.dots span{width:9px;height:9px;border-radius:50%;background:#ccc;transition:background .3s}
.dots span.active{background:#111}

.card h3{font-family:'Playfair Display',serif;font-size:20px;margin:12px 0}
.card ul{padding-left:18px;color:#555;font-size:14px}
.card ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  color:#555;
}

.card li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #111;
}
.contact{margin-top:120px}
.contact h2{font-family:'Playfair Display',serif;margin-bottom:20px}
.contact form{max-width:520px;display:flex;flex-direction:column;gap:16px}
.contact input,.contact textarea{padding:14px;border-radius:14px;border:1px solid #ccc;font-family:inherit}
.contact input:focus,.contact textarea:focus{outline:none;border-color:#111}
.contact button{background:#111;color:#fff;border:none;padding:14px;border-radius:26px;cursor:pointer;font-size:14px;transition:all .3s}
.contact button:hover{background:#000;transform:translateY(-2px)}

.footer{text-align:center;padding:40px 20px;margin-top:100px;color:#777;font-size:13px;border-top:1px solid #e5e5e5}

.social {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.social .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, background .3s;
}

.social svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.social .text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.social strong {
  font-size: 15px;
  font-weight: 600;
}

.social small {
  font-size: 13px;
  color: #666;
}

.social:hover .icon {
  transform: scale(1.08);
  background: #000;
}

.instagram:hover {
  background: linear-gradient(135deg, #000, #222);
}

.etsy:hover {
  background: #111;
  color: #fff;
}

.etsy:hover small {
  color: #ccc;
}
.hero {
  background:
    repeating-linear-gradient(
      45deg,
      #f7f7f7,
      #f7f7f7 10px,
      #f3f3f3 10px,
      #f3f3f3 20px
    );
  border-bottom: 1px solid #e5e5e5;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 90px;
  text-align: center;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #111;
}

.hero p {
  font-size: 18px;
  color: #555;
  max-width: 520px;
  margin: 0 auto 36px;
}

.hero-btn {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 14px 34px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .3s, transform .3s;
}

.hero-btn:hover {
  background: #000;
  transform: translateY(-2px);
}

.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

.form-status.success,
.form-status.error {
  opacity: 1;
  transform: translateY(0);
}

.form-status.success {
  background: #f4f4f4;
  color: #111;
  border: 1px solid #e0e0e0;
}

.form-status.success::before {
  content: "✔";
  font-size: 1.1rem;
  color: #111;
}

.form-status.error {
  background: #f9f9f9;
  color: #555;
  border: 1px solid #ddd;
}

.form-status.error::before {
  content: "✖";
  font-size: 1.1rem;
  color: #777;
}

@media (max-width: 768px) {
  .hero-content {
    padding: 70px 20px 60px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    font-size: 16px;
  }
}

.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

@media(max-width:900px){.articles{grid-template-columns:1fr}}
@media(max-width:600px){.links{grid-template-columns:1fr}.header{padding:20px}}