*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; font-family: "Nunito Sans", "Avenir", "Segoe UI", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Desktop y tablet: recortes idénticos al PDF */
.desktop { max-width: 2560px; margin-inline: auto; }
.slice { position: relative; }
.slice picture { display: block; }
.slice img { width: 100%; }
.hit { position: absolute; border-radius: 999px; }
.hit:focus-visible { outline: 3px solid #4bdf7d; outline-offset: 2px; }
.hit { transition: background-color .2s ease, box-shadow .2s ease; }
.hit-light:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.hit-dark:hover { background: rgba(51,168,107,.1); box-shadow: 0 6px 18px rgba(51,168,107,.18); }
.mobile { display: none; }

/* Móvil: mismo diseño con texto real */
@media (max-width: 820px) {
  .desktop { display: none; }
  .mobile { display: block; color: #3b3b3b; }

  .m-eyebrow { margin: 0 0 6px; color: #1ca24a; font-size: 1rem; font-weight: 600; }
  .mobile h2 { margin: 0 0 18px; font-size: clamp(1.7rem, 7.4vw, 2.3rem); font-weight: 300; line-height: 1.18; letter-spacing: -.01em; }
  .m-body { margin: 0; color: #777; font-size: .95rem; font-weight: 400; line-height: 1.6; }

  .m-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; border-radius: 999px; font-size: .86rem; font-weight: 800; text-decoration: none; }
  .m-btn svg { width: 20px; height: 20px; }
  .m-btn-light { color: #fff; }
  .m-btn-green { color: #1ca24a; }
  .m-btn:focus-visible { outline: 3px solid #4bdf7d; outline-offset: 3px; }

  .m-hero { position: relative; overflow: hidden; padding: 22px 24px 28px; color: #fff; background: #091f15; }
  .m-hero-art { position: absolute; inset: 0 0 auto 0; height: 640px; background: url("assets/m/hero-art.jpg") right top / cover no-repeat; background-image: image-set(url("assets/m/hero-art.webp") type("image/webp"), url("assets/m/hero-art.jpg") type("image/jpeg")); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
  .m-logo { position: relative; width: min(46vw, 190px); height: auto; }
  .m-hero-copy { position: relative; padding-top: min(78vw, 330px); }
  .m-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 9.4vw, 2.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
  .m-hero-copy p { max-width: 34ch; margin: 0 0 22px; font-size: .92rem; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,.88); }
  .m-cna { position: relative; width: min(84%, 340px); margin: 34px 0 0 auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); mask-composite: intersect; }

  .m-about { padding: 44px 24px 56px; text-align: center; background: #fff; }
  .m-about .m-eyebrow { text-align: left; }
  .m-leaf { width: 40px; margin: 22px auto 18px; mix-blend-mode: multiply; }
  .m-about .m-body { max-width: 46ch; margin-inline: auto; }

  .m-products { padding: 44px 24px 36px; background: #f5f5f5; overflow: hidden; }
  .m-wave { width: 100vw; max-width: none; margin: 24px 0 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
  .m-logos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; justify-items: center; }
  .m-logos li { display: grid; justify-items: center; }
  .m-logos li::before { content: ""; width: 1px; height: 34px; background: #1ca24a; opacity: .7; }
  .m-logos img { width: auto; height: 64px; }
  .m-logos li:nth-child(2) img { height: 84px; }

  .m-places { padding: 48px 24px 24px; background: #fff; overflow: hidden; }
  .m-places .m-body { margin-bottom: 22px; }
  .m-map { width: 100%; margin-top: 18px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%); }

  .m-cta { position: relative; overflow: hidden; padding: 56px 24px 28px; color: #fff; background: #091f15; }
  .m-cta-art { position: absolute; inset: 0 0 auto auto; width: 78%; height: 66%; background: url("assets/m/cta-art.jpg") right top / cover no-repeat; background-image: image-set(url("assets/m/cta-art.webp") type("image/webp"), url("assets/m/cta-art.jpg") type("image/jpeg")); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, #000 60%, transparent 100%); mask-composite: intersect; }
  .m-cta h2, .m-cta p, .m-footer { position: relative; }
  .m-cta h2 { max-width: 12ch; color: #fff; font-size: clamp(2rem, 9vw, 2.7rem); font-weight: 900; line-height: 1.05; }
  .m-cta p { max-width: 22ch; margin: 0 0 90px; font-size: 1rem; font-weight: 400; line-height: 1.45; }
  .m-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .m-footer-brand { display: flex; align-items: center; gap: 12px; }
  .m-footer-brand img { width: 86px; height: auto; }
  .m-footer-brand p { margin: 0; max-width: none; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.55); font-size: .74rem; font-weight: 400; line-height: 1.4; color: rgba(255,255,255,.92); }
  .m-social { display: flex; gap: 10px; }
  .m-social a { display: grid; place-items: center; width: 34px; height: 34px; color: #091f15; background: #fff; border-radius: 50%; }
  .m-social svg { width: 18px; height: 18px; fill: currentColor; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mapa interactivo */
.map-layer { --f: calc(100cqw / var(--w)); position: absolute; inset: 0; container-type: inline-size; font-family: "Nunito Sans", "Avenir", "Segoe UI", Arial, sans-serif; }
.mp-cover { position: absolute; background: #fff; pointer-events: none; }
.mp-joint { position: absolute; background: #98d3b4; pointer-events: none; }
.mp-pill { position: absolute; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: transparent; font: 600 calc(var(--f) * 47) / 1 "Nunito Sans", "Avenir", Arial, sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; }
.mp-pill[hidden] { display: none; }
.mp-pill.is-idle-drawn { background: #a4a9aa; color: #fff; box-shadow: 0 calc(var(--f) * 8) calc(var(--f) * 14) rgba(0,0,0,.18); }
.mp-pill:hover, .mp-pill.is-hover, .mp-pill.is-active { background: #33a86b; color: #fff; box-shadow: 0 calc(var(--f) * 12) calc(var(--f) * 26) rgba(40,130,85,.38); transform: translateY(calc(var(--f) * -3)); }
.mp-pill:focus-visible, .mp-go:focus-visible { outline: calc(var(--f) * 7) solid #1d6f45; outline-offset: calc(var(--f) * 5); }
.mp-pin { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp-mark { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--f) * 3) calc(var(--f) * 4) rgba(0,0,0,.15)); }
.mp-ring { position: absolute; left: 50%; top: 38%; width: calc(var(--f) * 170); height: calc(var(--f) * 170); border: calc(var(--f) * 6) solid #33a86b; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.35); }
.mp-pin.is-hover .mp-ring, .mp-pin.is-active .mp-ring { animation: mp-pulse 1.7s ease-out infinite; }
.mp-card { position: absolute; display: grid; align-content: center; gap: calc(var(--f) * 8); padding: 0 calc(var(--f) * 140) 0 calc(var(--f) * 42); color: #fff; background: #33a86b; border-radius: calc(var(--f) * 38); box-shadow: 0 calc(var(--f) * 18) calc(var(--f) * 36) rgba(30,110,70,.35); transition: left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1); }
.mp-card.is-pop { animation: mp-pop .35s ease-out; }
.mp-card strong { font-size: calc(var(--f) * 56); font-weight: 800; line-height: 1.1; }
.mp-card { z-index: 2; padding-top: calc(var(--f) * 30); padding-right: calc(var(--f) * 100); padding-bottom: calc(var(--f) * 34); }
.mp-card[hidden] { display: none; }
.mp-close { position: absolute; top: calc(var(--f) * 22); right: calc(var(--f) * 22); display: grid; place-items: center; width: calc(var(--f) * 64); height: calc(var(--f) * 64); margin: 0; padding: 0; color: #fff; background: rgba(255,255,255,.18); border: 0; border-radius: 50%; cursor: pointer; transition: background .2s ease; }
.mp-close:hover { background: rgba(255,255,255,.32); }
.mp-close:focus-visible { outline: calc(var(--f) * 6) solid #fff; outline-offset: calc(var(--f) * 4); }
.mp-close svg { width: 55%; height: 55%; }
.mp-card span { font-size: calc(var(--f) * 34); font-weight: 400; line-height: 1.2; opacity: .92; }
.mp-card .mp-addr { font-size: calc(var(--f) * 30); opacity: 1; }
.mp-maps { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.mp-card .mp-maps { margin-top: calc(var(--f) * 6); font-size: calc(var(--f) * 30); }
.mp-maps::after { content: " ↗"; }
.mp-go { position: absolute; right: calc(var(--f) * 38); top: 50%; display: grid; place-items: center; width: calc(var(--f) * 92); height: calc(var(--f) * 92); color: #33a86b; background: #fff; border-radius: 50%; transform: translateY(-50%); transition: transform .2s ease; }
.mp-go:hover { transform: translateY(-50%) scale(1.1); }
.mp-go svg { width: 52%; height: 52%; }
.mp-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 16px 18px; color: #fff; background: #33a86b; border-radius: 16px; }
.mp-panel { flex-wrap: wrap; }
.mp-panel div { display: grid; gap: 2px; }
.mp-panel .mp-maps { margin-top: 4px; font-size: .85rem; }
.mp-panel strong { font-size: 1.15rem; font-weight: 800; }
.mp-panel span { font-size: .85rem; opacity: .92; }
.mp-panel .m-btn { color: #33a86b; background: #fff; border-color: #fff; flex: none; min-height: 40px; font-size: .8rem; }
.mp-panel .m-btn svg { width: 18px; height: 18px; }
.m-map-wrap { position: relative; margin-top: 18px; }
.m-map-wrap .m-map { margin-top: 0; }
@keyframes mp-pulse { 0% { opacity: .75; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes mp-pop { 0% { opacity: .2; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .mp-card, .mp-pill { transition: none; } .mp-pin.is-hover .mp-ring, .mp-pin.is-active .mp-ring, .mp-card.is-pop { animation: none; } }
.mp-pill::after, .mp-pin::after { content: ""; position: absolute; inset: calc(var(--f) * -28); }

/* Contact card: --f scales the 1280px desktop artwork (cqw) or a fixed unit on mobile */
.contact-slice { container-type: inline-size; }
.cc { --f: calc(100cqw / 1280); position: relative; z-index: 3; display: grid; gap: calc(var(--f) * 10); width: max-content; max-width: 100%; padding: calc(var(--f) * 18) calc(var(--f) * 20) calc(var(--f) * 20) calc(var(--f) * 24); color: #fff; font-family: "Nunito Sans", "Avenir", "Segoe UI", Arial, sans-serif; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); border-radius: calc(var(--f) * 26); box-shadow: 0 calc(var(--f) * 18) calc(var(--f) * 40) rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cover-white { position: absolute; background: #fff; pointer-events: none; }
.cc-sedes { --f: calc(100cqw / 1280 * .78); position: absolute; z-index: 3; left: 6.2%; top: 21.6%; }
.cc-light { color: #14281d; background: linear-gradient(135deg, #fff, #f1f8f4); border-color: rgba(51,168,107,.35); box-shadow: 0 calc(var(--f) * 14) calc(var(--f) * 30) rgba(30,110,70,.16); }
.cc-light .cc-label { color: #1ca24a; }
.cc-light .cc-mail { color: #14281d; }
.cc-light .cc-copy { color: #1ca24a; background: rgba(51,168,107,.1); border-color: rgba(51,168,107,.35); }
.cc-light .cc-copy:hover { background: rgba(51,168,107,.2); }
.cc-light .cc-copy.is-copied { color: #fff; background: #33a86b; border-color: #33a86b; }
.cc-label { font-size: calc(var(--f) * 13); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7fe3ab; }
.cc-row { display: flex; align-items: center; gap: calc(var(--f) * 14); }
.cc-mail { display: inline-flex; align-items: center; gap: calc(var(--f) * 14); color: #fff; font-size: calc(var(--f) * 26); font-weight: 800; letter-spacing: -.005em; text-decoration: none; }
.cc-mail span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s ease; padding-bottom: 2px; }
.cc-mail:hover span, .cc-mail:focus-visible span { background-size: 100% 2px; }
.cc-ico { display: grid; place-items: center; flex: none; width: calc(var(--f) * 46); height: calc(var(--f) * 46); color: #fff; background: #33a86b; border-radius: 50%; box-shadow: 0 calc(var(--f) * 6) calc(var(--f) * 16) rgba(51,168,107,.45); transition: transform .25s ease; }
.cc-ico svg { width: 56%; height: 56%; }
.cc-mail:hover .cc-ico { transform: rotate(-8deg) scale(1.08); }
.cc-copy { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--f) * 40); height: calc(var(--f) * 40); margin: 0; padding: 0; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; cursor: pointer; transition: background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.cc-copy:hover { background: rgba(255,255,255,.28); }
.cc-copy svg { grid-area: 1 / 1; width: 52%; height: 52%; transition: opacity .2s ease, transform .2s ease; }
.cc-copy .i-ok { opacity: 0; transform: scale(.5); }
.cc-copy.is-copied { color: #091f15; background: #7fe3ab; border-color: #7fe3ab; }
.cc-copy.is-copied .i-copy { opacity: 0; transform: scale(.5); }
.cc-copy.is-copied .i-ok { opacity: 1; transform: scale(1); }
.cc-mail:focus-visible, .cc-copy:focus-visible { outline: 3px solid #4bdf7d; outline-offset: 3px; border-radius: 999px; }
.cc-menu { position: absolute; z-index: 4; left: calc(var(--f) * 24); top: calc(100% + var(--f) * 10); display: grid; min-width: calc(var(--f) * 250); padding: calc(var(--f) * 8); background: #fff; border: 1px solid rgba(51,168,107,.28); border-radius: calc(var(--f) * 20); box-shadow: 0 calc(var(--f) * 18) calc(var(--f) * 40) rgba(0,0,0,.22); animation: mp-pop .18s ease-out; }
.cc-menu[hidden] { display: none; }
.cc-menu a { display: flex; align-items: center; gap: calc(var(--f) * 14); padding: calc(var(--f) * 13) calc(var(--f) * 16); color: #14281d; font-size: calc(var(--f) * 22); font-weight: 700; text-decoration: none; border-radius: calc(var(--f) * 13); transition: background .15s ease; }
.cc-menu a:hover, .cc-menu a:focus-visible { background: rgba(51,168,107,.12); outline: none; }
.cc-menu a:focus-visible { box-shadow: inset 0 0 0 2px #33a86b; }
.cc-menu i { flex: none; width: calc(var(--f) * 14); height: calc(var(--f) * 14); border-radius: 50%; }
.cc-mobile { display: none; }

@media (max-width: 820px) {
  .cc-mobile { --f: .78px; display: grid; position: relative; margin: 26px 0 0; }
  @media (max-width: 380px) { .cc-mobile { --f: .66px; } }
  .mobile picture { display: contents; }
  .m-logo { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(4,20,12,.7)); }
  .m-hero, .m-about, .m-products, .m-places, .m-cta { padding-inline: max(24px, calc((100% - 620px) / 2)); }
}