/* ════════════════════════════════════════════════════════
   TALCA JARDÍN — talcajardin.cl
   Hoja de estilos principal
═══════════════════════════════════════════════════════ */

:root{
  --verde-oscuro:#0e2a0e;
  --verde-medio:#1a4a1a;
  --verde-profundo:#143614;
  --verde-vivo:#3d8f18;
  --verde-lima:#7ed63a;
  --verde-claro:#c4e09a;
  --crema:#f4f1e4;
  --crema-suave:#faf8ef;
  --negro:#0a0a0a;
  --gris-tx:#3a3a3a;
  --gris-soft:#6a6a6a;
  --gris-line:#e6e3d8;

  --shadow-sm:0 4px 14px rgba(14,42,14,0.08);
  --shadow-md:0 12px 36px rgba(14,42,14,0.12);
  --shadow-lg:0 24px 60px rgba(14,42,14,0.18);

  --r:14px;
  --r-lg:22px;
  --t:0.3s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:'Montserrat',sans-serif;
  color:var(--gris-tx);
  background:var(--crema-suave);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

/* ============== FOTO PLACEHOLDER (universal) ============== */
[data-file]{
  background-color:var(--verde-medio);
  background-image:
    linear-gradient(135deg,rgba(255,255,255,0.04),rgba(0,0,0,0.06)),
    linear-gradient(135deg,#3d8f18 0%,#2d6a2d 50%,#1f4f1f 100%);
  background-size:cover;
  background-position:center;
  position:relative;
}
[data-file]::after{
  content:attr(data-file);
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:monospace;
  font-size:13px;
  color:rgba(255,255,255,0.75);
  background:rgba(0,0,0,0.4);
  padding:8px 14px;
  border-radius:6px;
  border:1.5px dashed rgba(255,255,255,0.35);
  white-space:nowrap;
  pointer-events:none;
}

/* ============== TIPOGRAFÍA / SECCIONES ============== */
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  color:var(--verde-vivo);
  text-transform:uppercase;
  letter-spacing:4px;
  margin-bottom:18px;
}
.eyebrow.light{color:var(--verde-lima)}

.sect-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 64px auto;
}
.sect-head h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(36px,5vw,56px);
  color:var(--verde-oscuro);
  line-height:1.05;
  margin-bottom:20px;
}
.sect-head h2 em{font-style:italic;color:var(--verde-vivo)}
.sect-head p{
  font-size:17px;
  color:var(--gris-soft);
  max-width:620px;
  margin:0 auto;
}

/* ============== BOTONES ============== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;
  border-radius:50px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.3px;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  cursor:pointer;
}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--verde-lima),var(--verde-vivo));
  color:var(--verde-oscuro);
  box-shadow:0 10px 26px rgba(126,214,58,0.35);
}
.btn-primary:hover{box-shadow:0 14px 34px rgba(126,214,58,0.45)}
.btn-ghost{
  background:rgba(255,255,255,0.1);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,0.18)}
.btn-ghost-dark{
  background:transparent;
  color:var(--verde-oscuro);
  border:2px solid var(--verde-oscuro);
}
.btn-ghost-dark:hover{background:var(--verde-oscuro);color:#fff}
.btn-full{width:100%;justify-content:center}

/* ============== HEADER ============== */
.hdr{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:rgba(244,241,228,0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(14,42,14,0.06);
  transition:padding var(--t),background var(--t);
}
.hdr.scrolled{
  background:rgba(244,241,228,0.96);
  box-shadow:var(--shadow-sm);
}
.hdr-wrap{
  max-width:1240px;
  margin:0 auto;
  padding:14px 32px;
  display:flex;align-items:center;
  gap:24px;
}
.hdr-brand{
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.hdr-brand img{height:44px;width:auto}
.hdr-brand-tx{line-height:1.1}
.hdr-brand-tx .n{
  font-family:'DM Serif Display',serif;
  font-size:20px;color:var(--verde-oscuro);font-weight:400;
  display:block;
}
.hdr-brand-tx .t{
  font-size:9px;color:var(--verde-vivo);
  font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;
}
.hdr-nav{
  display:flex;gap:32px;
  margin:0 auto;
}
.hdr-nav a{
  font-size:14px;font-weight:600;
  color:var(--verde-oscuro);
  position:relative;
  transition:color var(--t);
}
.hdr-nav a::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--verde-lima);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t);
}
.hdr-nav a:hover{color:var(--verde-vivo)}
.hdr-nav a:hover::after{transform:scaleX(1)}
.hdr-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--verde-oscuro);
  color:#fff;
  padding:11px 22px;border-radius:40px;
  font-size:14px;font-weight:700;
  transition:background var(--t),transform var(--t);
}
.hdr-cta svg{width:18px;height:18px}
.hdr-cta:hover{background:var(--verde-vivo);transform:translateY(-1px)}
.hdr-burger{
  display:none;
  width:42px;height:42px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hdr-burger span{
  width:24px;height:2.5px;background:var(--verde-oscuro);border-radius:2px;
  transition:transform var(--t),opacity var(--t);
}
.hdr-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hdr-burger.open span:nth-child(2){opacity:0}
.hdr-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile nav */
.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--verde-oscuro);
  padding:24px 32px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  color:#fff;padding:14px 0;
  font-size:16px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mobile-nav .m-cta{
  margin-top:18px;
  background:var(--verde-lima);
  color:var(--verde-oscuro);
  text-align:center;
  border-radius:40px;
  padding:14px;border:none;
}

/* ============== HERO ============== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:140px 32px 100px 32px;
  overflow:hidden;
}
.hero-photo{
  position:absolute;inset:0;
  z-index:1;
}
.hero-overlay{
  position:absolute;inset:0;
  z-index:2;
  background:
    linear-gradient(135deg,rgba(10,26,10,0.65) 0%,rgba(10,26,10,0.35) 50%,rgba(10,26,10,0.85) 100%);
}
.hero-content{
  position:relative;z-index:3;
  max-width:1240px;
  margin:0 auto;
  width:100%;
  color:#fff;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(126,214,58,0.18);
  border:1px solid rgba(126,214,58,0.5);
  color:var(--verde-lima);
  padding:10px 22px;
  border-radius:40px;
  font-size:13px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  margin-bottom:36px;
  backdrop-filter:blur(8px);
}
.hero-eyebrow .dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--verde-lima);
  box-shadow:0 0 0 0 rgba(126,214,58,0.7);
  animation:dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(126,214,58,0.5)}
  50%{box-shadow:0 0 0 10px rgba(126,214,58,0)}
}
.hero-sub b{color:var(--verde-lima);font-weight:800}

/* ===== HERO FLOATING BADGES ===== */
.hero-floats{
  position:absolute;
  right:48px;top:50%;
  transform:translateY(-30%);
  z-index:3;
  display:flex;flex-direction:column;
  gap:18px;
  pointer-events:none;
}
.float-card{
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:18px 22px;
  display:flex;align-items:center;gap:14px;
  color:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,0.25);
  animation:float-y 5s ease-in-out infinite;
}
.float-card.f2{animation-delay:-2.5s}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.fc-ic{
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--verde-lima),var(--verde-vivo));
  color:var(--verde-oscuro);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.fc-ic svg{width:24px;height:24px}
.fc-tx{line-height:1.15}
.fc-tx b{
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:32px;
  color:#fff;font-weight:400;
}
.fc-tx span{
  display:block;
  font-size:11px;font-weight:700;
  color:var(--verde-lima);
  letter-spacing:2px;text-transform:uppercase;
  margin-top:2px;
}

/* ===== HERO TRUST ROW ===== */
.hero-trust{
  display:flex;flex-wrap:wrap;
  gap:22px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.15);
}
.ht-item{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.82);
  letter-spacing:0.3px;
}
.ht-item svg{
  width:18px;height:18px;
  color:var(--verde-lima);
  background:rgba(126,214,58,0.15);
  padding:3px;border-radius:50%;
}
.hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(48px,8vw,108px);
  line-height:0.96;
  margin-bottom:36px;
  text-shadow:0 6px 30px rgba(0,0,0,0.4);
  max-width:920px;
}
.hero-title em{
  font-style:italic;color:var(--verde-lima);
}
.hero-sub{
  font-size:clamp(17px,2vw,21px);
  font-weight:500;
  color:rgba(255,255,255,0.85);
  max-width:620px;
  margin-bottom:48px;
  line-height:1.5;
}
.hero-actions{
  display:flex;gap:16px;flex-wrap:wrap;
}
.hero-scroll{
  position:absolute;bottom:40px;left:50%;
  transform:translateX(-50%);
  width:30px;height:50px;
  border:2px solid rgba(255,255,255,0.5);
  border-radius:20px;
  z-index:3;
  display:flex;justify-content:center;
}
.hero-scroll span{
  display:block;
  width:4px;height:10px;
  background:rgba(255,255,255,0.8);
  margin-top:8px;
  border-radius:2px;
  animation:scroll 1.8s ease-in-out infinite;
}
@keyframes scroll{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(20px);opacity:0}
}

/* ============== KPI BAR ============== */
.kpi-bar{
  background:var(--verde-oscuro);
  padding:44px 32px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
  z-index:5;
}
.kpi{
  display:flex;
  align-items:center;
  gap:18px;
  color:#fff;
  position:relative;
  padding:0 18px;
}
.kpi:not(:last-child)::after{
  content:'';
  position:absolute;right:-12px;top:15%;bottom:15%;
  width:1px;
  background:rgba(255,255,255,0.1);
}
.kpi-ic{
  width:54px;height:54px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(126,214,58,0.18),rgba(126,214,58,0.05));
  border:1.5px solid rgba(126,214,58,0.35);
  color:var(--verde-lima);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.kpi-ic svg{width:26px;height:26px}
.kpi-tx{line-height:1.2;min-width:0}
.kpi-tx b{
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:22px;
  color:#fff;
  line-height:1.1;
  margin-bottom:4px;
  font-weight:400;
}
.kpi-tx span{
  display:block;
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.4px;
}

/* ============== SECCIONES (padding base) ============== */
.services,.process,.transforms,.works,.reviews,.instagram,.about,.contact{
  padding:120px 32px;
}

/* ============== TESTIMONIOS / RESEÑAS ============== */
.reviews{background:var(--crema-suave);position:relative}
.reviews::before{
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:120px;height:4px;
  background:var(--verde-lima);
  border-radius:0 0 4px 4px;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-bottom:64px;
}
.review{
  background:#fff;
  border-radius:var(--r-lg);
  padding:36px 32px 32px 32px;
  box-shadow:var(--shadow-sm);
  position:relative;
  display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t);
  overflow:hidden;
}
.review:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.review-quote-mark{
  position:absolute;
  top:-30px;right:18px;
  font-family:'DM Serif Display',serif;
  font-size:160px;
  color:var(--verde-claro);
  line-height:1;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
}
.review-svc{
  display:inline-block;
  background:rgba(126,214,58,0.15);
  color:var(--verde-vivo);
  font-size:10px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 14px;border-radius:30px;
  margin-bottom:18px;
  align-self:flex-start;
  position:relative;
  z-index:1;
}
.review-stars{
  display:flex;gap:4px;
  color:#f0a040;
  margin-bottom:16px;
  position:relative;
  z-index:1;
}
.review-stars svg{width:18px;height:18px}
.review blockquote{
  font-size:15.5px;
  font-weight:500;
  color:var(--gris-tx);
  line-height:1.65;
  margin-bottom:26px;
  flex:1;
  position:relative;
  z-index:1;
  font-style:normal;
}
.review-author{
  display:flex;align-items:center;gap:14px;
  padding-top:22px;
  border-top:1px solid var(--gris-line);
  position:relative;
  z-index:1;
}
.ra-avatar{
  width:46px;height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--verde-lima),var(--verde-vivo));
  color:var(--verde-oscuro);
  font-family:'DM Serif Display',serif;
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  line-height:1;
}
.ra-info{line-height:1.3}
.ra-info b{
  display:block;
  font-size:15px;
  color:var(--verde-oscuro);
  font-weight:800;
}
.ra-info span{
  display:block;
  font-size:12px;
  color:var(--gris-soft);
  font-weight:500;
  margin-top:2px;
}

.reviews-meta{
  display:flex;
  align-items:center;justify-content:center;
  gap:48px;
  padding:32px 40px;
  background:#fff;
  border:2px solid var(--verde-lima);
  border-radius:var(--r-lg);
  max-width:880px;
  margin:0 auto;
}
.rm-item{text-align:center}
.rm-item b{
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:42px;
  color:var(--verde-vivo);
  line-height:1;
}
.rm-item span{
  display:block;
  font-size:12px;font-weight:700;
  color:var(--gris-soft);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-top:8px;
}
.rm-divider{
  width:1px;height:40px;
  background:var(--gris-line);
}

/* ============== INSTAGRAM SECTION ============== */
.instagram{
  background:linear-gradient(180deg,var(--crema) 0%,var(--crema-suave) 100%);
}
.ig-eye-ico{
  display:inline-block;
  width:14px;height:14px;
  vertical-align:-2px;
  margin-right:6px;
  color:var(--verde-vivo);
}
.ig-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.ig-post{
  position:relative;
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  display:block;
  cursor:pointer;
  transition:transform var(--t);
}
.ig-post:hover{transform:scale(1.02)}
.ig-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 0.6s ease;
}
.ig-post:hover .ig-img{transform:scale(1.08)}
.ig-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(131,58,180,0.75) 0%,rgba(225,48,108,0.75) 50%,rgba(253,168,69,0.75) 100%);
  opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--t);
  z-index:2;
}
.ig-overlay svg{
  width:48px;height:48px;
  color:#fff;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  transform:scale(0.8);
  transition:transform var(--t);
}
.ig-post:hover .ig-overlay{opacity:1}
.ig-post:hover .ig-overlay svg{transform:scale(1)}

.ig-cta{
  display:flex;justify-content:center;
  margin-top:48px;
}
.btn-ig{
  background:linear-gradient(135deg,#833ab4 0%,#e1306c 50%,#fda85d 100%);
  color:#fff;
  border:none;
  padding:18px 36px;
  box-shadow:0 10px 26px rgba(225,48,108,0.3);
}
.btn-ig:hover{
  box-shadow:0 14px 34px rgba(225,48,108,0.4);
}
.btn-ig svg{width:22px;height:22px}

/* ============== PROCESO ============== */
.process{
  background:#fff;
  position:relative;
}
.process::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:1px;background:var(--gris-line);
}
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  position:relative;
}
.steps::before{
  content:'';
  position:absolute;
  top:42px;left:8%;right:8%;
  height:2px;
  background:linear-gradient(to right,var(--gris-line) 0%,var(--verde-claro) 50%,var(--gris-line) 100%);
  z-index:0;
}
.step{
  position:relative;
  text-align:center;
  z-index:1;
}
.step-num{
  width:86px;height:86px;
  border-radius:50%;
  margin:0 auto 24px auto;
  background:#fff;
  border:2px solid var(--verde-oscuro);
  font-family:'DM Serif Display',serif;
  font-size:32px;
  color:var(--verde-oscuro);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t),color var(--t),transform var(--t);
}
.step:hover .step-num{
  background:var(--verde-oscuro);
  color:var(--verde-lima);
  transform:scale(1.05);
}
.step h3{
  font-family:'DM Serif Display',serif;
  font-size:22px;
  color:var(--verde-oscuro);
  margin-bottom:12px;
  font-weight:400;
}
.step p{
  font-size:14.5px;
  color:var(--gris-soft);
  line-height:1.55;
  max-width:240px;
  margin:0 auto;
}

/* ============== SERVICIOS ============== */
.services{background:var(--crema-suave)}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr}}
.svc-card{
  background:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t);
  display:flex;flex-direction:column;
  position:relative;
}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
.svc-card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--verde-lima);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s ease;
  z-index:2;
}
.svc-card:hover::after{transform:scaleX(1)}
.svc-photo{
  overflow:hidden;
  position:relative;
}
.svc-card .svc-photo{
  background-size:cover;
  background-position:center;
  transition:background-size 0.6s ease;
}
.svc-card:hover .svc-photo{
  background-size:108%;
}
.svc-photo{
  width:100%;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}
.svc-body{
  padding:28px 24px 32px 24px;
}
.svc-ico{
  width:54px;height:54px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--verde-claro),rgba(126,214,58,0.2));
  color:var(--verde-vivo);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.svc-ico svg{width:28px;height:28px}
.svc-body h3{
  font-family:'DM Serif Display',serif;
  font-size:24px;
  color:var(--verde-oscuro);
  margin-bottom:10px;
  font-weight:400;
}
.svc-body p{
  font-size:15px;
  color:var(--gris-soft);
  line-height:1.55;
}

/* ============== ANTES / DESPUÉS ============== */
.transforms{
  background:linear-gradient(180deg,var(--verde-oscuro) 0%,var(--verde-profundo) 100%);
  color:#fff;
}
.transforms .sect-head.alt h2{color:#fff}
.transforms .sect-head.alt h2 em{color:var(--verde-lima)}
.transforms .sect-head.alt p{color:rgba(255,255,255,0.7)}
.transforms .eyebrow{color:var(--verde-lima)}
.ba-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:24px;
}
.ba{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:ew-resize;
  user-select:none;
  box-shadow:var(--shadow-md);
}
.ba-after,.ba-before{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.ba-before{
  clip-path:inset(0 calc(100% - var(--clip)) 0 0);
}
.ba-handle{
  position:absolute;top:0;bottom:0;
  left:var(--x);
  width:2px;
  background:rgba(255,255,255,0.92);
  z-index:3;
  pointer-events:none;
  box-shadow:0 0 18px rgba(0,0,0,0.45);
}
.ba-handle::before{
  content:'⇄';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  color:var(--verde-oscuro);
  border:3px solid var(--verde-lima);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;
  font-family:Arial,sans-serif;
  box-shadow:0 6px 22px rgba(0,0,0,0.3),0 0 0 4px rgba(255,255,255,0.35);
  letter-spacing:-1px;
}
.ba-tag{
  position:absolute;top:18px;
  background:rgba(0,0,0,0.7);color:#fff;
  padding:9px 20px;border-radius:30px;
  font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  z-index:2;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
}
.ba-tag-l{left:18px}
.ba-tag-r{right:18px;background:var(--verde-lima);color:var(--verde-oscuro);border-color:transparent}

/* ============== GALERÍA ============== */
.works{background:var(--crema)}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;
  gap:16px;
}
.g-item{
  border-radius:var(--r-lg);
  background-size:cover;background-position:center;
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
  transition:transform var(--t),box-shadow var(--t);
}
.g-item:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}
.g-item::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.4) 100%);
  opacity:0;transition:opacity var(--t);
}
.g-item:hover::before{opacity:1}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
.works-cta{
  text-align:center;margin-top:50px;
}

/* ============== NOSOTROS ============== */
.about{background:var(--crema-suave)}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about-photo{
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-md);
  position:relative;
}
.about-photo::before{
  content:'';
  position:absolute;
  inset:20px -20px -20px 20px;
  border:3px solid var(--verde-lima);
  border-radius:var(--r-lg);
  z-index:-1;
}
.about-content h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(34px,4vw,52px);
  color:var(--verde-oscuro);
  line-height:1.05;
  margin-bottom:24px;
}
.about-content h2 em{font-style:italic;color:var(--verde-vivo)}
.about-content p{
  font-size:16px;
  color:var(--gris-tx);
  margin-bottom:16px;
  line-height:1.65;
}
.about-feats{
  list-style:none;margin-top:30px;
}
.about-feats li{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
  font-size:15px;font-weight:600;color:var(--verde-oscuro);
  border-bottom:1px solid var(--gris-line);
}
.about-feats li:last-child{border:none}
.about-feats li svg{
  width:24px;height:24px;
  color:var(--verde-lima);
  background:rgba(126,214,58,0.15);
  padding:4px;border-radius:50%;
  flex-shrink:0;
}

/* ============== CONTACTO ============== */
.contact{
  background:
    radial-gradient(circle at 80% 20%,rgba(126,214,58,0.15) 0%,transparent 50%),
    linear-gradient(160deg,#050d05 0%,var(--verde-oscuro) 50%,var(--verde-medio) 100%);
  color:#fff;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.contact-info h2{
  font-family:'DM Serif Display',serif;
  font-size:clamp(36px,4.5vw,56px);
  color:#fff;line-height:1.05;
  margin-bottom:20px;
}
.contact-info h2 em{font-style:italic;color:var(--verde-lima)}
.contact-info p{
  font-size:17px;
  color:rgba(255,255,255,0.78);
  margin-bottom:36px;
}
.contact-list{
  list-style:none;
  display:grid;
  gap:18px;
}
.contact-list li{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  padding:18px 22px;
  border-radius:var(--r);
}
.ci-ico{
  width:48px;height:48px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--verde-lima),var(--verde-vivo));
  color:var(--verde-oscuro);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ci-ico svg{width:22px;height:22px}
.contact-list b{display:block;font-size:13px;color:var(--verde-lima);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.contact-list span{display:block;font-size:16px;color:#fff;font-weight:600;margin-top:2px}

.contact-form{
  background:#fff;
  color:var(--gris-tx);
  padding:42px 38px;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.contact-form h3{
  font-family:'DM Serif Display',serif;
  font-size:28px;
  color:var(--verde-oscuro);
  margin-bottom:24px;
  font-weight:400;
}
.contact-form label{
  display:block;
  margin-bottom:18px;
}
.contact-form label span{
  display:block;
  font-size:13px;font-weight:700;
  color:var(--verde-oscuro);
  margin-bottom:8px;
  letter-spacing:0.3px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--gris-line);
  border-radius:10px;
  font-family:inherit;
  font-size:15px;
  color:var(--gris-tx);
  background:#fafaf8;
  transition:border var(--t),background var(--t);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--verde-vivo);
  background:#fff;
}
.contact-form textarea{resize:vertical;min-height:100px}
.form-note{
  font-size:12px;color:var(--gris-soft);
  text-align:center;margin-top:14px;
}

/* ============== FOOTER ============== */
.ftr{
  background:#050d05;
  color:rgba(255,255,255,0.65);
  padding:80px 32px 0 32px;
}
.ftr-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:50px;
  padding-bottom:60px;
}
.ftr-logo{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.ftr-logo img{height:48px;width:auto}
.ftr-logo strong{
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:22px;color:#fff;font-weight:400;
}
.ftr-logo span{
  font-size:11px;font-weight:700;
  color:var(--verde-lima);
  letter-spacing:3px;text-transform:uppercase;
}
.ftr-brand p{
  font-size:14px;
  color:rgba(255,255,255,0.55);
  line-height:1.6;
}
.ftr-col h4{
  font-size:13px;color:var(--verde-lima);
  font-weight:800;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:18px;
}
.ftr-col a,.ftr-col span{
  display:block;
  font-size:14px;
  color:rgba(255,255,255,0.65);
  padding:6px 0;
  transition:color var(--t);
}
.ftr-col a:hover{color:var(--verde-lima)}
.ftr-bottom{
  max-width:1240px;
  margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.08);
  padding:24px 0;
  display:flex;justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,0.4);
}

/* ============== WHATSAPP BUBBLE ============== */
.wa-float{
  position:fixed;
  bottom:24px;right:24px;
  width:64px;height:64px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  z-index:90;
  box-shadow:0 10px 30px rgba(37,211,102,0.4);
  transition:transform var(--t);
  animation:wa-pulse 2.5s ease-in-out infinite;
}
.wa-float svg{width:32px;height:32px}
.wa-float:hover{transform:scale(1.08)}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,0.4),0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 10px 30px rgba(37,211,102,0.4),0 0 0 18px rgba(37,211,102,0)}
}

/* ============== LIGHTBOX ============== */
.lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.92);
  z-index:200;
  display:none;
  align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
.lb-img{
  width:90vw;height:90vh;
  max-width:1200px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.3);
  color:#fff;
  font-size:28px;font-weight:700;
  width:54px;height:54px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,0.2)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}

/* ============== REVEAL ANIMATIONS ============== */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ============== RESPONSIVE ============== */
@media (max-width:980px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
  .hdr-cta{display:none}
  .hero-floats{display:none}
  .kpi-bar{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .kpi:not(:last-child)::after{display:none}
  .kpi{padding:0}
  .steps{grid-template-columns:repeat(2,1fr);gap:50px}
  .steps::before{display:none}
  .reviews-grid{grid-template-columns:1fr;gap:20px}
  .reviews-meta{flex-direction:column;gap:24px;padding:28px 32px}
  .rm-divider{width:60px;height:1px}
  .about-grid{grid-template-columns:1fr;gap:50px}
  .about-photo{max-width:500px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr;gap:50px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:40px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .g-tall{grid-row:span 1}
  .g-wide{grid-column:span 1}
  .ig-grid{grid-template-columns:repeat(4,1fr);gap:6px}
}
@media (max-width:600px){
  .container{padding:0 20px}
  .services,.process,.transforms,.works,.instagram,.about,.contact{padding:80px 20px}
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .sect-head{margin-bottom:40px}
  .hero{padding:120px 20px 80px 20px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .kpi-bar{padding:30px 20px;gap:24px;grid-template-columns:1fr}
  .kpi{justify-content:flex-start}
  .kpi-tx b{font-size:18px}
  .kpi-tx span{font-size:11px}
  .steps{grid-template-columns:1fr;gap:40px}
  .gallery{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr;gap:36px}
  .ftr-bottom{flex-direction:column;gap:10px;text-align:center}
  .contact-form{padding:30px 24px}
  .wa-float{width:56px;height:56px;bottom:18px;right:18px}
  .wa-float svg{width:28px;height:28px}
}