:root{--bg:#ffffff;--fg:#0b1d17;--muted:#5b6b64;--brand:#0e7a3d;--brand-2:#15a055;--surface:#f3f7f5;--card:#ffffff;--border:#e0ece6;--shadow:0 6px 24px rgba(0,0,0,.06);--header-bg:linear-gradient(180deg,#eaf7f1 0%,#def1ea 100%);--footer-bg:linear-gradient(180deg,#def1ea 0%,#eaf7f1 100%)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
main{flex:1}
img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin-inline:auto;padding:clamp(12px,2vw,24px)}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:12px;top:12px;background:#000;color:#fff;padding:8px;border-radius:6px}

.site-header{background:var(--header-bg);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;gap:16px}
.logo{display:inline-flex;align-items:center}
.nav ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.nav a{display:inline-block;padding:10px 12px;border-radius:10px;color:var(--fg);transition:transform .15s ease, background-color .2s ease}
.nav a:is(:hover,:focus-visible){background:var(--surface)}.nav a:active{transform:scale(.98)}.nav .btn-sm{padding:8px 12px}.nav-toggle{display:none}

.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:24px}
.hero h1{font-size:clamp(24px,4vw,40px);line-height:1.1;margin:.2em 0 .4em}.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

.grid{display:grid;gap:16px}.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.hero{grid-template-columns:1fr}.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards-3{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .6s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08);border-color:color-mix(in oklab, var(--brand), #fff 85%)}
.card:active{transform:translateY(0) scale(.99)}

.btn{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;border:none;border-radius:12px;padding:12px 18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease, filter .2s ease}
.btn:hover{filter:brightness(.98)}.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;border:1px solid var(--brand);color:var(--brand)}
.btn .rip{position:absolute;border-radius:999px;transform:translate(-50%,-50%);pointer-events:none;opacity:.25;animation:rip .6s ease-out forwards;background:#fff}
@keyframes rip{from{width:0;height:0;opacity:.3}to{width:240px;height:240px;opacity:0}}

/* Global green shine */
.nav .btn-cta,
.btn:not(.btn-ghost){position:relative;overflow:hidden;isolation:isolate;box-shadow:0 6px 20px rgba(14,122,61,.18);transition:transform .12s ease, box-shadow .2s ease, filter .2s ease}
.nav .btn-cta:hover,.btn:not(.btn-ghost):hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(14,122,61,.28);filter:brightness(.98)}
.nav .btn-cta:active,.btn:not(.btn-ghost):active{transform:translateY(0) scale(.99)}
.nav .btn-cta::before,.btn:not(.btn-ghost)::before{content:"";position:absolute;top:-60%;left:-40%;width:45%;height:220%;transform:rotate(25deg);background:rgba(255,255,255,.35);filter:blur(10px);animation:shine 3.6s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes shine{0%{left:-40%}55%{left:140%}100%{left:140%}}
.btn-ghost{position:relative;overflow:hidden;isolation:isolate}
.btn-ghost::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(14,122,61,.10),transparent);animation:shine 3.6s ease-in-out infinite;pointer-events:none;border-radius:inherit}

.price-table{width:100%;border-collapse:collapse;border:1px solid var(--border)}.price-table th,.price-table td{padding:12px;border-bottom:1px solid var(--border)}.price-table thead{background:var(--surface)}
.muted{color:var(--muted)}

.form{display:block}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .span-2{grid-column:1/-1}
label{display:grid;gap:6px;font-weight:600}input,select,textarea{padding:12px;border-radius:10px;border:1px solid var(--border);outline:0;transition:border-color .2s ease, box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand),#fff 80%)}

.site-footer{margin-top:32px;border-top:1px solid var(--border);background:var(--footer-bg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.legal{border-top:1px solid var(--border);padding:12px 0;color:var(--muted)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.nav ul{flex-wrap:wrap}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(14px)}.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.card,.reveal{transition:none;transform:none !important;opacity:1 !important}}

/* Social icons */
.social{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);transition:transform .15s ease, background-color .2s ease, border-color .2s ease}
.social a:hover{transform:translateY(-2px);background:var(--surface);border-color:color-mix(in oklab,var(--brand),#fff 85%)}
.social svg{width:22px;height:22px}
.footer-social{margin-top:8px}

/* === Oferta: one-swipe scrollytelling === */
html{scroll-snap-type:y mandatory;overscroll-behavior-y:contain}
body{touch-action:pan-y}
.offer-screen{width:100vw;margin-left:50%;transform:translateX(-50%); background: var(--scene-bg, transparent);}
.offer-screen .stage{position:sticky;top:0;height:100vh}
.scene{position:relative;height:100%;display:grid;place-items:center;transition:background .4s ease; background: var(--scene-bg, linear-gradient(180deg, var(--brand), var(--brand-2))); color:#fff}
.scene-inner{display:grid;place-items:center;gap:12px;text-align:center;padding:clamp(16px,3vw,32px);grid-template-rows:auto auto 1fr}
.scene-visual{width:min(56vw,560px);max-width:92%;filter:drop-shadow(0 10px 30px rgba(0,0,0,.18))}
.scene h2{font-size:clamp(32px,5.2vw,56px);line-height:1.04;margin:.08em 0 .08em}
.bullets{text-align:left;max-width:min(86vw,780px);margin:.2em auto 0 auto}
.bullets ul{margin:.2em auto 0 auto;padding-left:1.15em}
.bullets li{margin:.24em 0}
.legend{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);opacity:.85}
.waypoint{height:100vh;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.palette-1{--scene-bg: linear-gradient(180deg, #0e7a3d, #15a055);}           
.palette-2{--scene-bg: radial-gradient(1200px 600px at 50% 20%, #15a055, #0b6a35);} 
.palette-3{--scene-bg: linear-gradient(180deg, #129e53, #0b6a35);}          
.palette-4{--scene-bg: linear-gradient(180deg, #0b6a35, #168f65);}          
.palette-4 .scene-visual{ width: min(44vw, 420px); }
.palette-4 .legend{ display: none; }
.palette-4 .bullets li{ margin:.18em 0; font-size: clamp(14px, 1.8vw, 16px); }
.palette-4 .scene-inner{ gap: 10px; }
@media (max-width:640px){
  .palette-4 .scene-visual{ width: min(62vw, 380px); }
  .palette-4 .scene h2{ font-size: clamp(22px, 6vw, 34px); }
  .palette-4 .bullets li{ font-size: clamp(13px, 3.4vw, 15px); }
}

/* Snap to header/footer */
.site-header, .site-footer{scroll-snap-align:start;scroll-snap-stop:always}

/* === Mobile optimizations: slimmer header + hamburger drawer === */
@media (max-width: 900px){
  /* V28: hide 'Menu' text on mobile */
  .nav-toggle{ font-size:0; }
  /* Keep '×' visible on open via ::after font-size set below */

  .header-inner{ padding-block: 8px; }
  .logo img{ width: 96px; height: auto; }

  .nav-toggle{ 
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 40px; height: 40px; border: none; 
    background: transparent; color: inherit; border-radius: 10px; position: relative;
  }
  .nav-toggle:focus-visible{ outline: 2px solid color-mix(in oklab, var(--brand), #fff 70%); outline-offset: 2px; }
  .nav-toggle::before{
    content: ""; position: absolute; width: 22px; height: 2px; background: currentColor;
    box-shadow: 0 -7px 0 0 currentColor, 0 7px 0 0 currentColor;
    transform: translateY(0);
  }
  body.nav-open .nav-toggle::before{ opacity: 0; }
  body.nav-open .nav-toggle::after{
    content: "×"; position: absolute; font-size: 24px; line-height: 1;
  }

  .nav ul{
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 420px); padding: 16px;
    background: var(--card); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 150;
  }
  .nav ul.open{ transform: translateX(0); }
  .nav a{ padding: 12px 10px; font-size: 16px; border-radius: 12px; }
  .nav .btn-sm{ padding: 12px 12px; }

  .nav-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease; z-index: 140;
  }
  body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }
  body.nav-open{ overflow: hidden; }
}


/* Contact Modal */
.modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:saturate(160%) blur(6px);z-index:200}
.modal-backdrop.open{display:flex;animation:modalFade .18s ease-out}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.18);width:min(720px,92vw);max-height:90vh;overflow:auto}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal header h3{margin:0;font-size:1.1rem}
.modal .modal-body{padding:16px}
.modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.modal .close{appearance:none;border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:6px;border-radius:8px}
.modal .close:focus{outline:2px solid color-mix(in oklab, var(--brand), #fff 70%);outline-offset:2px}
.modal .hint{color:var(--muted);font-size:.92rem;margin-top:8px}
@media (max-width:520px){.modal .modal-body{padding:12px}}


/* V28: ensure drawer links are clickable */
@media (max-width: 900px){
  .nav ul a{ pointer-events:auto; touch-action: manipulation; }
}