/* ===========================
   Base y variables
   =========================== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }

:root{
  --dark-blue: #105f31;
  --light-blue: #ffffff;
  --orange: #ca6826;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --dark-gray: #333;
  --white: #fff;
  --whatsapp-green: #186333;

  /* About */
  --brand-500:#0e5e35;
  --brand-600:#21a764;
  --brand-400:#09ac57;

  /* Misión & Visión */
  --mvx-g1:#00a14e;
  --mvx-g2:#008f45;
  --mvx-g3:#00ff7b;
  --mvx-white:#ffffff;
  --mvx-soft:#eafff3;
  --mvx-radius:20px;
  --mvx-gap:clamp(16px,3vw,28px);

  /* Valores */
  --v-green:#1c5a26;
  /* NOTE: --v-green-dark no estaba definido originalmente; no lo defino para no alterar colores */
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-decoration: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===========================
   Header y navegación
   =========================== */
header{
  position: sticky;
  top: 0;
  z-index: 1200;
  background-color: var(--dark-blue);
  padding: 12px 0;
}
header .container{ display: flex; justify-content: space-between; align-items: center; }

/* logo */
.logo{ display: flex; align-items: center; gap: 8px; }
.logo-img{ width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.logo-text{ font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: .5px; }

/* navegación desktop */
.desktop-nav ul{ display: flex; }
.desktop-nav li{ margin-left: 30px; }
.desktop-nav a{ color: var(--white); font-weight: 500; position: relative; padding: 5px 0; }
.desktop-nav a::after{
  content: "";
  position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--orange); transition: width .3s ease;
}
.desktop-nav a:hover::after{ width: 100%; }

/* Menú móvil */
.mobile-menu-toggle{ display: none; color: var(--white); font-size: 24px; cursor: pointer; }
.mobile-nav{
  display: none; background-color: var(--dark-blue);
  position: fixed; top: 0; left: -100%;
  width: 80%; height: 100%; z-index: 1000; transition: left .3s ease; padding-top: 80px;
}
.mobile-nav.active{ left: 0; }
.mobile-nav li{ border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-nav a{ color: var(--white); display: block; padding: 15px 20px; font-size: 18px; }

/* ===========================
   Hero
   =========================== */
.hero{ position: relative; height: 500px; overflow: hidden; }
.hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-content{ position: relative; z-index: 1; color: var(--white); max-width: 600px; margin-left: 10%; }
.hero-content h1{ font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }

/* ===========================
   QUIÉNES SOMOS
   =========================== */
.about{
  position: relative;
  padding: clamp(36px,7vw,88px) 16px;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(33,121,77,.12), transparent 60%),
    radial-gradient(900px 420px at 88% -6%, rgba(46,169,108,.10), transparent 60%),
    #f7faf8;
  overflow: hidden;
}
.about-wrap{ max-width: 980px; margin: 0 auto; text-align: center; }
.about-head{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto clamp(16px,2.8vw,24px);
}
.about-chip{
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(10px,1vw + 8px,14px) clamp(18px,3vw,30px);
  border-radius: 999px; color: #fff; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  font-size: clamp(18px,1.3vw + 12px,26px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) padding-box,
    linear-gradient(135deg, var(--brand-600), var(--brand-500) 55%, var(--brand-400)) border-box;
  border: 1px solid transparent; box-shadow: 0 14px 36px rgba(25,92,57,.25);
  backdrop-filter: blur(4px) saturate(120%);
}
.about-deco{
  width: clamp(40px,8vw,120px); height: 2px;
  background: linear-gradient(to right, transparent, rgba(1,126,61,.6), transparent);
  display: inline-block; margin: 0 clamp(10px,2vw,18px); transform: translateY(2px);
}
.about-deco.left{ background: linear-gradient(to left, transparent, rgba(0,136,66,.6), transparent); }
.about-text{
  margin: 0 auto; color: #425a4f; line-height: 1.85; font-size: clamp(15px,.45vw + 13px,18px);
  max-width: 820px; padding: 0 clamp(4px,2vw,10px); opacity: 0; transform: translateY(14px);
}
.about-text.in{ opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 520px){ .about-deco{ display: none; } }

/* ===========================
   Productos (slider + tabs)
   =========================== */
.np-head{ text-align:center; margin: 0 0 26px; }
.np-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 28px; border-radius: 999px; color:#fff; font-weight:800; letter-spacing:.4px;
  font-size: clamp(18px, 1.3vw + 12px, 26px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) padding-box,
    linear-gradient(135deg, #014222, #007c3c 55%, #00c05d) border-box;
  border:1px solid transparent; box-shadow: 0 14px 36px rgba(25,92,57,.25);
  backdrop-filter: blur(4px) saturate(120%);
}

.np-section{ padding: 48px 0; background:#fff; }
.np-wrap{ max-width:1100px; margin:auto; padding:0 18px; }
.np-slider{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:#fff; border-radius:18px; padding:24px; box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.np-stage{ position:relative; width:100%; max-width:760px; margin:auto; }
.np-slides{ position:relative; }
.np-slide{ display:none; flex-direction:column; align-items:center; gap:14px; }
.np-slide.is-active{ display:flex; }

/* Título + imagen */
.np-product-title{ margin:0 0 4px; font:700 22px/1.2 system-ui,Segoe UI,Roboto,Arial; color:#014e14; text-align:center; }
.np-figure{
  margin:0; display:flex; justify-content:center; align-items:center;
  background:linear-gradient(190deg,#ffffff,#fff); border-radius:16px; overflow:hidden; min-height:160px;
}
.np-figure img{ display:block; max-width:100%; max-height:520px; object-fit:contain; }
.dolomita{ width:180px; height:auto; display:block; margin:0 auto; }
.yeso{ width:210px; height:auto; display:block; margin:0 auto; }

/* Flechas */
.np-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:58px; height:58px; border-radius:50%;
  border:1px solid #1d6934; background:#e6f8edcc;
  backdrop-filter:saturate(120%) blur(6px);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#006933; box-shadow:0 12px 28px rgba(8, 83, 44, 0.16);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; z-index:5;
}
.np-arrow:hover{ transform:translateY(calc(-50% - 1px)) scale(1.03); background:#fff; box-shadow:0 16px 34px rgba(25,92,57,.24); }
.np-arrow:active{ transform:translateY(calc(-50% + 1px)) scale(.98); }
.np-arrow--prev{ left:-6px; }
.np-arrow--next{ right:-6px; }
@media (max-width:800px){ .np-arrow--prev{ left:6px; } .np-arrow--next{ right:6px; } }

/* Tabs */
.np-tabs{
  display:inline-flex; gap:6px; border-radius:12px; padding:6px;
  background:#eef6f0; border:1px solid #d6e6db;
}
.np-tab{
  border:0; background:transparent; color:#164a36; cursor:pointer;
  padding:10px 14px; border-radius:10px; font-weight:800;
  transition: background .2s ease, color .2s ease;
}
.np-tab.is-active{ background:#164a36; color:#fff; }

/* Paneles */
.np-panels{ width:100%; max-width:760px; min-height:0; }
.np-panel{
  font:500 15px/1.65 system-ui,Segoe UI,Roboto,Arial;color:#2a3347;
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.np-panel.is-active{ opacity:1; transform: translateY(0); }
.np-panel[hidden]{ display:none !important; }
.np-panel ul,.np-panel ol{ margin:10px 0 0 18px; }
.np-panel p{ margin:8px 0; }

/* Hover tabs (fallback si no hay JS) */
.np-tabs button:hover{
  background-color:#07662a; color:#fff; border-radius:6px; padding:4px 10px; cursor:pointer; transition:all .3s ease;
}

/* ===========================
   Misión y Visión
   =========================== */
.mvx{
  position: relative; padding: clamp(36px,7vw,96px) 16px; overflow: hidden;
  font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.mvx-bg{
  position:absolute; inset:-10% -10% -20% -10%;
  background:
    radial-gradient(700px 400px at 15% -10%, rgba(0,116,58,.2), transparent 60%),
    radial-gradient(700px 400px at 90% -5%, rgba(46,169,108,.16), transparent 60%),
    linear-gradient(180deg, #f7faf8, #f5fff9);
  pointer-events:none;
}
.mvx::before, .mvx::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120px 120px at 10% 15%, rgba(94,192,142,.28), transparent 60%),
    radial-gradient(160px 160px at 90% 80%, rgba(26,112,73,.18), transparent 60%);
  filter: blur(20px); animation: mvxGlow 16s ease-in-out infinite alternate; pointer-events:none;
}
.mvx::after{ animation-delay: 3s; }
@keyframes mvxGlow{ 0%{ transform: translateY(-10px) scale(1); opacity:.6; } 100%{ transform: translateY(10px) scale(1.06); opacity:.9; } }

.mvx-grid{
  position: relative; z-index: 2; max-width: 1160px; margin: 0 auto;
  display: grid; gap: var(--mvx-gap); grid-template-columns: 1fr;
}
@media (min-width: 900px){ .mvx-grid{ grid-template-columns: 1fr 1fr; } }

.mvx-card{
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: clamp(20px,2.8vw,32px); border-radius: var(--mvx-radius); color: var(--mvx-white);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) padding-box,
    linear-gradient(135deg, var(--mvx-g1), var(--mvx-g2) 55%, var(--mvx-g3)) border-box;
  border: 1px solid transparent; box-shadow: 0 18px 50px rgba(25,92,57,.35);
  backdrop-filter: blur(6px) saturate(120%);
  transform: translateY(30px) scale(.96); opacity: 0; overflow: hidden; will-change: transform, opacity;
}
.mvx-card::after{
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); opacity:.35;
}
.mvx-reveal.mvx-in{
  opacity: 1; transform: translateY(0) scale(1);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
}
.mvx-reveal.mvx-in:nth-child(2){ transition-delay:.08s; }
.mvx-reveal.mvx-in:nth-child(3){ transition-delay:.16s; }

.mvx-card:hover{ box-shadow: 0 24px 68px rgba(25,92,57,.45); }
@keyframes mvxShine{ to{ left: 130%; } }
.mvx-card:hover::after{ animation: mvxShine 1.1s ease forwards; }

.mvx-icon{
  --s: 60px; width: var(--s); height: var(--s);
  display: grid; place-items:center; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(25,92,57,.40);
  animation: mvxPulse 3.2s ease-in-out infinite; transform: translateZ(0);
}
.mvx-icon svg{ fill:#fff; }
@keyframes mvxPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

.mvx-body h3{
  margin: 0 0 8px; font-weight: 800; font-size: clamp(18px,1.25vw + 13px,26px); letter-spacing: .2px;
}
.mvx-body p{
  margin: 0; color: var(--mvx-soft); line-height: 1.75; font-size: clamp(14px,.4vw + 12px,16px);
}

@media (prefers-reduced-motion: reduce){
  .mvx-card, .mvx-reveal.mvx-in, .mvx::before, .mvx::after, .mvx-card::after{
    animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important;
  }
}
@media (max-width: 420px){
  .mvx-card{ grid-template-columns: 1fr; }
  .mvx-icon{ margin-bottom: 6px; }
}

/* ===========================
   VALORES
   =========================== */
.vals{
  position: relative; padding: clamp(40px, 7vw, 96px) 16px; overflow: hidden;
  font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.vals-bg{
  position:absolute; inset:-12% -10% -16% -10%;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(0,0,0,.16), transparent 60%),
    radial-gradient(900px 420px at 92% -6%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(#ffffff,#ffffff);
  pointer-events:none; z-index: 0;
}
.vals-head{ position:relative; z-index:1; text-align:center; margin-bottom: clamp(18px,3vw,30px); }
.vals-head .vals-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; border-radius:999px; background: linear-gradient(135deg, #2a9960, #37b96e);
  color:#fff; font-weight:800; font-size:clamp(18px, 1.4vw + 10px, 24px); letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(25,92,57,.28); border: 1px solid rgba(255,255,255,.25);
}

.vals-grid{
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(2, minmax(240px,1fr));
  justify-items: center; perspective: 1100px;
}
@media (min-width: 820px){ .vals-grid{ grid-template-columns: repeat(3, minmax(240px,1fr)); } }
@media (min-width: 1180px){ .vals-grid{ grid-template-columns: repeat(5, minmax(220px,1fr)); } }

.val-card{
  width:100%; text-align:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0, 87, 23, 0.06)) padding-box,
    linear-gradient(135deg, var(--v-green-dark), var(--v-green) 55%, #06ce71) border-box; /* NOTE: --v-green-dark no definida originalmente */
  border:1px solid transparent; border-radius: 18px;
  box-shadow:0 16px 42px rgba(15, 99, 26, 0.16);
  padding: clamp(18px, 2.5vw, 26px) clamp(14px, 2vw, 22px);
  transform-style: preserve-3d;
  transform: translateY(24px) scale(.97);
  opacity: 0; will-change: transform, opacity;
  transition: box-shadow .35s ease, border-color .35s ease;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(6px) saturate(120%);
  animation: valFloat 7s ease-in-out infinite alternate;
}
@keyframes valFloat{ 0%{ transform: translateY(24px) scale(.97); } 100%{ transform: translateY(18px) scale(.975); } }

.val-icon{
  --s:70px; width:var(--s); height:var(--s);
  display:grid; place-items:center; margin: 0 auto 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--v-green);
  box-shadow: 0 10px 24px rgba(25,92,57,.14);
  transform: translateZ(28px);
  animation: valPulse 3.2s ease-in-out infinite;
}
.val-icon i{ font-size: 30px; color: var(--v-green); }
@keyframes valPulse{ 0%,100%{ transform:translateZ(28px) scale(1) } 50%{ transform:translateZ(28px) scale(1.06) } }

.val-card h3{
  margin: 6px 0 6px;
  color: inherit;
  font-size: 18px; font-weight: 800;
}

.val-reveal.in{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 90ms),
              opacity .9s ease calc(var(--i) * 90ms);
}
.val-card:hover{
  transform: rotateX(7deg) rotateY(-7deg) translateY(-6px) scale(1.02);
  box-shadow: 0 26px 70px rgba(25,92,57,.28);
}
@media (hover:none){ .val-card:hover{ transform:none; } }

/* ===========================
   Footer
   =========================== */
footer{ background-color: var(--dark-blue); color: var(--white); padding: 14px 0 10px; }
.footer-content{ display: grid; grid-template-columns: 1fr 1.6fr 0.8fr; gap: 16px; margin-bottom: 10px; }
.footer-info{ display: flex; flex-direction: column; justify-content: center; }
.address, .phone{ font-size: .95rem; margin-bottom: 6px; }
.address i, .phone i{ margin-right: 8px; font-size: .95rem; margin-top: 2px; }
.social-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background-color: var(--white); color: var(--dark-blue);
  border-radius: 50%; margin: 0 5px; transition: all .3s ease;
}
.social-icon:hover{ background-color: var(--orange); color: var(--white); transform: translateY(-3px); }

/* Logo circular del footer */
.loofotter-wrap{
  --size: 96px;
  width: var(--size); aspect-ratio: 1; padding: 3px; border-radius: 50%;
  background: conic-gradient(135deg, #37b96e, #0e5e35 55%, #00c05d);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.loofotter-wrap .loofotter{
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid #ffffff;
  object-fit: cover; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.12);
}
.loofotter-wrap:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.26); }

/* ===========================
   WhatsApp Switcher (WSP)
   =========================== */
.wsw{
  position: fixed; right: 20px; bottom: 20px; z-index: 1500;
  display: flex; align-items: center; gap: 10px;
}
.wsw-teaser{
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: #ffffff;
  border: 1px solid #e8f3ec; border-radius: 999px; box-shadow: 0 10px 22px rgba(0,0,0,.10);
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.wsw-teaser i{ color:#25D366; font-size: 20px; line-height: 1; }
.wsw-teaser span{ color:#24463c; font-weight: 700; font-size: 14px; line-height: 1; }
.wsw-teaser:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.12); border-color:#dbefe4; background: #ffffff; }
.wsw-teaser:focus-visible{ outline: 2px solid #25D366; outline-offset: 2px; }

.wsw-fab{
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color:#fff; border:0; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-size: 28px; line-height: 1;
}
.wsw-fab:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.22); background:#1ebe57; }
.wsw-fab:focus-visible{ outline: 2px solid #ffffff; outline-offset: 3px; }

.wsw-panel{ position: fixed; inset: 0; display: none; background: rgba(0,0,0,.28); z-index: 1490; }
.wsw-panel.is-open{ display:block; }

.wsw-card{
  position: absolute; right: 20px; bottom: 92px; width: min(92vw, 380px);
  background: #ffffff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transform: translateY(12px); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.wsw-panel.is-open .wsw-card{ transform: translateY(0); opacity: 1; }

.wsw-header{
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: #25D366; color: #ffffff;
}
.wsw-header-icon{
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 18px;
}
.wsw-header h4{ margin: 0; font-size: 16px; font-weight: 800; line-height: 1.15; }
.wsw-header p{ margin: 2px 0 0; font-size: 12px; opacity: .95; }
.wsw-close{
  margin-left: auto; background: transparent; border: 0; color: #ffffff;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .9;
}
.wsw-close:hover{ opacity: 1; }
.wsw-close:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; }

.wsw-body{ padding: 8px 10px 10px; max-height: 64vh; overflow: auto; }
.wsw-item{
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: 10px; border: 1px solid #eef2f3; background: #ffffff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, background .18s ease;
}
.wsw-item + .wsw-item{ margin-top: 10px; }
.wsw-item:hover{ box-shadow: 0 10px 20px rgba(0,0,0,.06); border-color: #e6f1ea; transform: translateY(-1px); background: #ffffff; }

.wsw-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #ffffff; background: #0bb255; overflow: hidden; user-select: none;
}
.wsw-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.wsw-name{ font-weight: 800; color: #16322e; font-size: 14px; line-height: 1.2; }
.wsw-role{ font-size: 12px; color: #5f7a72; margin-top: 2px; }

.wsw-meta{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wsw-whats{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #eafaf0; color: #21a95e; font-size: 16px;
  transition: transform .15s ease, background .15s ease;
}
.wsw-whats:hover{ transform: scale(1.06); background: #dbf6e6; }
.wsw-whats:focus-visible{ outline: 2px solid #21a95e; outline-offset: 2px; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px){
  .mobile-menu-toggle{ display: block; order: 1; margin-right: 15px; }
  .logo{ order: 2; text-align: center; flex-grow: 1; }
  .desktop-nav{ display: none; }
  .mobile-nav{ display: block; }
  header .container{ justify-content: space-between; }

  .hero-content h1{ font-size: 2rem; text-align: center; margin-left: 0; }
  .hero-content{ margin: 0 auto; padding: 0 20px; }

  .footer-content{ grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 520px){
  .vals-grid{ grid-template-columns: 1fr; }
  .wsw-teaser{ display: none; }
  .wsw{ right: 14px; bottom: 14px; }
  .wsw-fab{ width: 58px; height: 58px; font-size: 26px; }
  .wsw-card{ right: 10px; left: 10px; width: auto; }
}

@media (max-width: 480px){
  .hero-content h1{ font-size: 1.5rem; }
}

/* Evitar que el header tape títulos anclados */
.hero, .about, .mvx, .vals, .np-section{ scroll-margin-top: 90px; }
/* ===== SERVICIOS (encapsulado) ===== */
:root{
  --svc-g1:#04862b;          /* verde principal */
  --svc-g2:#026b3a;          /* verde oscuro */
  --svc-accent:hsl(0, 0%, 95%);      /* dorado */
  --svc-white:#fff;
  --svc-black:#0a0a0a;
  --svc-radius:24px;
  --svc-shadow:0 14px 40px rgba(0,0,0,.22);
}

.svc{
  margin: clamp(24px,4vw,56px) auto;
  max-width: 1200px;
  color: var(--svc-white);
  background:
    radial-gradient(1100px 420px at 10% -30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--svc-g1), var(--svc-g2));
  border-radius: var(--svc-radius);
  box-shadow: var(--svc-shadow);
  overflow: clip;
  position: relative;
}
.svc::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:8px;
  background: linear-gradient(90deg, var(--svc-accent), #FFE082);
}

.svc__wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px,3.5vw,40px);
  padding: clamp(24px,5vw,60px);
  align-items:center;
}

.svc__titulo{
  margin: 0 0 8px;
  font-size: clamp(28px,3.4vw,42px);
  font-weight: 800;
  letter-spacing:.02em;
}
.svc__sub{
  margin: 0 0 18px;
  font-size: clamp(20px,2.2vw,28px);
  font-weight: 700;
  color: var(--svc-accent);
}
.svc__texto p{
  margin: 0 0 12px;
  line-height: 1.75;
  text-align: justify;
  color: #F1F8E9;
}

/* Imagen */
.svc__media{
  margin:0; position:relative; isolation:isolate;
  transform-style: preserve-3d; perspective: 900px;
}
.svc__media img{
  width:100%;
  aspect-ratio: 16/10;             /* adapta bien en móvil */
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--svc-shadow);
  display:block;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  will-change: transform;
}
.svc__media figcaption{
  position:absolute; left:12px; bottom:12px;
  background: rgba(0,0,0,.5);
  color:#fff; font-size:.85rem;
  padding:.32rem .56rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
}

/* Estado inicial (revelado con JS) */
.svc .svc__texto,
.svc .svc__media{
  opacity: 0;
  transform: translateY(22px);
}

/* Cuando JS agrega .is-visible */
.svc.is-visible .svc__texto{
  opacity: 1; transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}
.svc.is-visible .svc__media{
  opacity: 1; transform: translateY(0);
  transition: opacity .7s ease .08s, transform .7s ease .08s;
}
.svc.is-visible .svc__media:hover img{
  filter: contrast(1.05) saturate(1.05);
  transform: scale(1.03) translateZ(10px);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .svc__wrap{ grid-template-columns: 1fr; }
  .svc__media{ order:-1; }                 /* imagen arriba en móvil */
  .svc::after{ height:6px; }
}
@media (max-width: 600px){
  .svc__wrap{ padding: 22px; gap: 16px; }
  .svc__titulo{ font-size: 26px; }
  .svc__sub{ font-size: 18px; }
  .svc__media img{ aspect-ratio: 4/3; border-radius: 14px; }
}

/* Accesibilidad: reduce animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .svc *{ transition: none !important; }
}