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

:root {
  /* Premium Dark Mode Colors */
  --bg-dark: #0f0a08;
  --bg-card: rgba(26, 18, 14, 0.4);
  --color-roble: #dca772;
  --color-roble-glow: rgba(220, 167, 114, 0.25);
  --color-texto: #fdfbf7;
  --color-texto-mutado: #999088;
  
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --header-height: 160px;
  
  --transition-fast: 0.3s ease;
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }
body { 
  font-family: var(--font-sans); background-color: var(--bg-dark); color: var(--color-texto); line-height: 1.6; overflow-x: hidden; 
  /* Pointer Default: Martillito */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" style="font-size:24px"><text y="22">🔨</text></svg>') 4 4, auto;
}

/* Pointer Interactivo: Martillito Brillante */
a, button, input, .header__toggle, .service-card, .gallery__item { 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" style="font-size:30px; filter: drop-shadow(0px 0px 6px %23dca772);"><text y="26">🔨</text></svg>') 5 5, pointer !important; 
}

/* Animación de Golpe - Se activa vía JS en mousedown */
body.hitting, body.hitting * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" style="font-size:30px; filter: drop-shadow(0px 0px 15px %23dca772);"><text y="26" transform="rotate(-40, 10, 26)">🔨</text></svg>') 0 15, pointer !important;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.section-title { font-size: 3rem; text-align: center; margin-bottom: 4rem; position: relative; background: linear-gradient(90deg, var(--color-texto) 0%, #fff 25%, var(--color-roble) 50%, #fff 75%, var(--color-texto) 100%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: text-shimmer 12s linear infinite; }
@keyframes text-shimmer { to { background-position: 200% center; } }
.section-title::after { content: ''; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background-color: var(--color-roble); box-shadow: 0 0 15px var(--color-roble-glow); animation: title-line-glow 3s infinite alternate; }
@keyframes title-line-glow { from { opacity: 0.5; width: 40px; } to { opacity: 1; width: 60px; } }

/* Glassmorphism utility */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(220, 167, 114, 0.1);
}

/* ================== HEADER ================== */
.header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; display: flex; align-items: center; transition: all var(--transition-fast); background: transparent; }
.header.scrolled { background: rgba(15, 10, 8, 0.85); backdrop-filter: blur(15px); height: 110px; border-bottom: 1px solid rgba(220, 167, 114, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.header__container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.header__logo-link { display: flex; align-items: center; transition: transform var(--transition-fast); }
.header__logo-link:hover { transform: scale(1.05); }
.header__logo-img { height: 140px; width: auto; filter: drop-shadow(0 0 20px var(--color-roble-glow)); transition: height var(--transition-fast); }
.header.scrolled .header__logo-img { height: 90px; }

.nav__list { display: flex; gap: 2.5rem; }
.nav__link { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--color-texto-mutado); transition: color var(--transition-fast), transform var(--transition-fast); display: inline-block; }
.nav__link:hover { color: var(--color-roble); transform: translateY(-2px); }

/* MENU MOBILE TOGGLE */
.header__toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 18px; background: none; border: none; cursor: pointer; z-index: 1001; }
.header__toggle-line { width: 100%; height: 2px; background-color: var(--color-roble); transition: var(--transition-fast); }

/* ================== HERO ================== */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, #20150e 0%, var(--bg-dark) 100%); }
#particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4; z-index: 0; pointer-events: none;}
.glow--1 { width: 50vw; height: 50vw; background: #6b4c30; top: -20vh; left: -20vw; animation: drift 15s ease-in-out infinite alternate;}
.glow--2 { width: 40vw; height: 40vw; background: #3b2312; bottom: -10vh; right: -10vw; animation: drift 10s ease-in-out infinite alternate-reverse;}

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 80px) scale(1.1); }
}

.hero__container { text-align: left; }
.hero__title { font-size: clamp(3.5rem, 8vw, 6.5rem); margin-bottom: 1.5rem; line-height: 1.1; color: var(--color-texto); }
.hero__subtitle { font-size: 1.25rem; font-weight: 300; max-width: 600px; margin-bottom: 3.5rem; color: var(--color-texto-mutado); line-height: 1.8; }

.btn { display: inline-flex; justify-content: center; align-items: center; padding: 1.2rem 3rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--bg-dark); background-color: var(--color-roble); border-radius: 2px; position: relative; overflow: hidden; transition: all var(--transition-slow); z-index: 1; border: 1px solid var(--color-roble); animation: btn-glow 3s infinite alternate; }
.btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform var(--transition-slow); }
.btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-25deg); animation: btn-shimmer 3s infinite cubic-bezier(0.19, 1, 0.22, 1); z-index: 0; pointer-events: none;}
.btn:hover { color: var(--bg-dark); box-shadow: 0 10px 40px var(--color-roble-glow); transform: translateY(-4px); border-color: #fff; animation-play-state: paused; }
.btn:hover::before { transform: scaleX(1); }

@keyframes btn-glow {
  0% { box-shadow: 0 0 10px rgba(220, 167, 114, 0.4), 0 0 20px rgba(220,167,114,0.1); transform: scale(1); }
  100% { box-shadow: 0 0 30px rgba(220, 167, 114, 0.8), 0 0 50px rgba(220,167,114,0.4); transform: scale(1.03); }
}

@keyframes btn-shimmer {
  0% { left: -100%; }
  50% { left: 200%; }
  100% { left: 200%; }
}

/* ================== SERVICES ================== */
.services { padding: 10rem 0; position: relative; background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1.5" fill="%23dca772" fill-opacity="0.05"/></svg>') repeat; }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; }

.service-card { padding: 4rem 3rem; border-radius: 4px; text-align: left; transition: all var(--transition-slow); position: relative; overflow: hidden; cursor: pointer;}
.service-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--color-roble); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-slow); }
.service-card:hover { transform: translateY(-15px); border-color: rgba(220, 167, 114, 0.5); box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 50px var(--color-roble-glow); background: rgba(220, 167, 114, 0.12);}
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover .service-card__desc { color: #fff; }

.service-card__icon { font-size: 3rem; margin-bottom: 2rem; color: var(--color-roble); }
.service-card__title { font-size: 1.8rem; margin-bottom: 1.2rem; color: var(--color-texto); }
.service-card__desc { color: var(--color-texto-mutado); font-weight: 300; line-height: 1.8; }

/* ================== GALLERY ================== */
.gallery { padding: 8rem 0 12rem; background: var(--bg-dark); }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; }

.gallery__item { border-radius: 4px; overflow: hidden; position: relative; aspect-ratio: 4/5; cursor: pointer; border: 1px solid rgba(255,255,255,0.05); }
.gallery__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gallery__caption { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 10, 8, 0.95) 0%, transparent 70%); display: flex; align-items: flex-end; padding: 2.5rem; transform: translateY(20px); opacity: 0; transition: all 0.5s ease; }
.gallery__caption span { font-family: var(--font-serif); font-size: 1.8rem; color: var(--color-roble); transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;}

.gallery__item:hover .gallery__image { transform: scale(1.08); }
.gallery__item:hover .gallery__caption { transform: translateY(0); opacity: 1; }
.gallery__item:hover .gallery__caption span { transform: translateY(0); }

/* ================== FOOTER ================== */
.footer { padding: 8rem 0 2rem; background: radial-gradient(ellipse at bottom, #20150e 0%, var(--bg-dark) 100%); border-top: 1px solid rgba(220, 167, 114, 0.15); position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-roble), transparent); opacity: 0.5; }
.footer__container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4rem; margin-bottom: 6rem; position: relative; z-index: 1; }
.footer__brand { flex: 1; min-width: 300px; }
.footer__logo-img { width: 100%; max-width: 550px; height: auto; margin-bottom: 2rem; pointer-events: auto; user-select: none; filter: contrast(1.4) brightness(0.9) grayscale(0.2); mix-blend-mode: lighten; mask-image: radial-gradient(ellipse at center, black 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); opacity: 0.9; transition: all var(--transition-slow); }
.footer__logo-img:hover { filter: contrast(1.5) brightness(1) drop-shadow(0 0 20px rgba(220, 167, 114, 0.3)); opacity: 1; transform: scale(1.02); }
.footer__text { font-family: var(--font-serif); font-size: 1.4rem; color: var(--color-roble); font-style: italic; letter-spacing: 1px; margin-top: -1.5rem; }
.footer__contact { color: var(--color-texto); text-align: right; background: rgba(26, 18, 14, 0.5); padding: 2.5rem 3rem; border-radius: 8px; border: 1px solid rgba(220, 167, 114, 0.1); backdrop-filter: blur(10px); box-shadow: 0 15px 35px rgba(0,0,0,0.4); flex-shrink: 0; min-width: 320px; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.footer__contact:hover { transform: translateY(-5px); border-color: rgba(220, 167, 114, 0.3); box-shadow: 0 20px 45px rgba(0,0,0,0.6), 0 0 30px rgba(220, 167, 114, 0.1); }
.footer__contact p { margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; font-size: 1.05rem; }
.footer__contact p:last-child { margin-bottom: 0; }
.footer__bottom { text-align: center; color: rgba(253, 251, 247, 0.5); font-size: 0.9rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 1; }

/* ================== WHATSAPP FLOATING BUTTON ================== */
.whatsapp-float { position: fixed; width: 65px; height: 65px; bottom: 35px; right: 35px; background-color: #25d366; color: #fff; border-radius: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 20px rgba(37, 211, 102, 0.4); z-index: 1000; transition: all var(--transition-fast); border: 1px solid rgba(255, 255, 255, 0.1); }
.whatsapp-float svg { width: 36px; height: 36px; fill: #fff; }
.whatsapp-float:hover { transform: translateY(-5px); box-shadow: 0px 8px 30px rgba(37, 211, 102, 0.6); background-color: #20b858; }
.whatsapp-float::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.8); animation: pulse-wa 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1); z-index: -1; }

@keyframes pulse-wa {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ================== TEXTURAS ================== */
.textures { position: relative; padding: 12rem 0; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.textures__bg { position: absolute; inset: 0; background: url('../assets/img/textura-madera.webp') center/cover no-repeat; background-attachment: fixed; filter: brightness(0.3); z-index: 0; animation: bg-zoom 25s infinite alternate linear; }
@keyframes bg-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
.textures__container { z-index: 1; max-width: 800px; }
.textures__title { margin-bottom: 2rem; }
.textures__desc { font-size: 1.2rem; color: var(--color-texto-mutado); }

/* ================== PROCESO ================== */
.process { padding: 8rem 0; background: var(--bg-dark); }
.process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4rem; position: relative; }
.process__steps::before { content: ''; position: absolute; top: 3.5rem; left: 0; width: 100%; height: 1px; background: rgba(220,167,114,0.15); z-index: 0; display: none; }
@media (min-width: 900px) { .process__steps::before { display: block; } }
.process__step { position: relative; z-index: 1; border-radius: 12px; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; overflow: hidden; display: flex; flex-direction: column; background: rgba(26, 18, 14, 0.3); backdrop-filter: blur(10px); }
.process__step:hover { background: rgba(220, 167, 114, 0.08); border-color: rgba(220, 167, 114, 0.2); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.process__img-wrapper { width: 100%; height: 260px; overflow: hidden; border-bottom: 2px solid rgba(220, 167, 114, 0.2); }
.process__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease, filter 0.8s ease; filter: brightness(0.8); }
.process__step:hover .process__img { transform: scale(1.08); filter: brightness(1.1); }
.process__content { padding: 2.5rem; flex-grow: 1; position: relative; }
.process__number { position: absolute; top: -55px; right: 20px; font-family: var(--font-serif); font-size: 6rem; color: rgba(255, 255, 255, 0.5); font-weight: 700; line-height: 1; margin: 0; pointer-events: none; transition: all 0.5s ease; z-index: 2; text-shadow: 0 5px 15px rgba(0,0,0,0.8); opacity: 0.3; }
.process__step:hover .process__number { color: rgba(220, 167, 114, 0.8); opacity: 0.9; text-shadow: 0 0 30px rgba(220, 167, 114, 1); transform: scale(1.1) translateY(-10px); }
.process__title { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-roble); transition: color 0.4s; position: relative; z-index: 3;}
.process__step:hover .process__title { color: #fff; }
.process__desc { color: var(--color-texto-mutado); transition: color 0.4s; position: relative; z-index: 3;}
.process__step:hover .process__desc { color: #fff; }

/* ================== TESTIMONIOS ================== */
.testimonials { padding: 8rem 0; background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1.5" fill="%23dca772" fill-opacity="0.06"/></svg>') repeat; animation: bg-pan 50s linear infinite; }
@keyframes bg-pan { 0% { background-position: 0 0; } 100% { background-position: 500px 500px; } }
.testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.testimonial-card { padding: 2.5rem; border-radius: 12px; border-left: 2px solid var(--color-roble); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.testimonial-card:hover { background: rgba(220, 167, 114, 0.08); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.6); border-left-width: 6px; border-left-color: #fff; }
.testimonial-card__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.testimonial-card__img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-roble); transition: transform 0.5s; }
.testimonial-card:hover .testimonial-card__img { transform: scale(1.1) rotate(5deg); border-color: #fff; }
.testimonial-card__name { font-size: 1.1rem; color: var(--color-texto); transition: color 0.4s; }
.testimonial-card:hover .testimonial-card__name { color: var(--color-roble); }
.testimonial-card__role { font-size: 0.85rem; color: var(--color-roble); text-transform: uppercase; letter-spacing: 1px; }
.testimonial-card__text { font-style: italic; color: rgba(253, 251, 247, 0.8); line-height: 1.8; transition: color 0.4s; }
.testimonial-card:hover .testimonial-card__text { color: #fff; }

/* ================== FAQ ================== */
.faq { padding: 8rem 0; background: var(--bg-dark); }
.faq__wrapper { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq__item { border-bottom: 1px solid rgba(220, 167, 114, 0.2); border-radius: 12px; padding: 0 1.5rem; transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; }
.faq__item:hover { background: rgba(220, 167, 114, 0.08); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); border-color: transparent; }
.faq__question { width: 100%; text-align: left; background: none; border: none; padding: 1.5rem 0; font-size: 1.15rem; color: var(--color-texto); font-weight: 600; font-family: var(--font-sans); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq__question:hover { color: var(--color-roble); }
.faq__icon { width: 24px; height: 24px; position: relative; transition: transform 0.3s; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--color-roble); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; }
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after { height: 100%; width: 2px; }
.faq__item.active .faq__icon { transform: rotate(180deg); }
.faq__item.active .faq__icon::after { height: 0; }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; color: var(--color-texto-mutado); }
.faq__item.active .faq__answer { max-height: 200px; padding-bottom: 1.5rem; }

/* ================== RESPONSIVE ================== */
@media screen and (max-width: 768px) {
  .header__toggle { display: flex; }
  .nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(15, 10, 8, 0.98); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateX(100%); transition: transform var(--transition-slow); z-index: 1000; }
  .nav.active { transform: translateX(0); }
  .nav__list { flex-direction: column; text-align: center; gap: 3.5rem; }
  .nav__link { font-size: 1.8rem; }
  
  .hero__title { font-size: 3.2rem; }
  .footer__container { flex-direction: column; text-align: center; gap: 3rem; }
  .footer__contact { text-align: center; padding: 2rem; width: 100%; align-items: center; justify-content: center; display: flex; flex-direction: column; }
  .footer__contact p { justify-content: center; }
  .footer__text { text-align: center; }
  
  .whatsapp-float { width: 55px; height: 55px; bottom: 20px; right: 20px; }
  .whatsapp-float svg { width: 30px; height: 30px; }
}

/* ================== ANIMATIONS (IO) ================== */
.fade-up { opacity: 0; transform: translateY(50px) scale(0.97); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.fade-up.visible { opacity: 1; transform: translateY(0) scale(1); }