*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#F4F0E6;color:#14201C;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img{display:block;max-width:100%}
  a{color:inherit}
  ::selection{background:#02827D;color:#fff}
  :focus-visible{outline:2px solid #02827D;outline-offset:3px}
  section[id]{scroll-margin-top:96px}
  @keyframes jdRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes jdSettle{from{transform:scale(1.07)}to{transform:scale(1)}}
  @keyframes jdLoadIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes jdLoadBar{0%{transform:translateX(-130%)}100%{transform:translateX(340%)}}
  @keyframes jdLeaf{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  [data-mega]:hover [data-mega-panel],[data-mega]:focus-within [data-mega-panel]{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
  [data-ch] [data-arrow]{transition:transform .3s cubic-bezier(.16,1,.3,1)}
  [data-ch]:hover [data-arrow]{transform:translateX(6px)}
  [data-svc] [data-arrow]{transition:transform .3s cubic-bezier(.16,1,.3,1)}
  [data-svc]:hover [data-arrow]{transform:translateX(6px)}
  h1,h2{text-wrap:balance}
  p{text-wrap:pretty}
  [data-nav]{position:relative}
  [data-nav]::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:100%;background:#02827D;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  [data-nav]:hover::after,[data-nav][data-active]::after{transform:scaleX(1)}
  [data-nav][data-active]{color:#02827D !important}
  a,button{transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),gap .4s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1),opacity .4s ease}
  [data-mobilecta]{display:none}
  @media (max-width:920px){
    [data-split]{grid-template-columns:1fr !important;gap:26px !important}
    [data-img]{order:-1 !important}
    [data-grid4]{grid-template-columns:1fr 1fr !important}
    [data-grid3]{grid-template-columns:1fr !important}
    [data-proc]{grid-template-columns:1fr 1fr !important}
    [data-gallery]{grid-template-columns:1fr 1fr !important}
    [data-gallery] figure{grid-column:auto !important;aspect-ratio:1/1 !important}
    [data-contact]{grid-template-columns:1fr !important}
    [data-foot]{grid-template-columns:1fr 1fr !important}
    [data-mobilecta]{display:flex !important}
    [data-floatwa]{display:none !important}
    [data-footel]{padding-bottom:86px !important}
  }
  @media (max-width:560px){
    [data-grid4]{grid-template-columns:1fr !important}
    [data-proc]{grid-template-columns:1fr !important}
    [data-gallery]{grid-template-columns:1fr !important}
    [data-gallery] figure{aspect-ratio:4/3 !important}
    [data-zone] [data-zsub]{display:none !important}
    [data-foot]{grid-template-columns:1fr !important}
    [data-herocta]{flex-direction:column !important;align-items:stretch !important}
    [data-herocta] a{justify-content:center !important}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}[data-reveal]{opacity:1 !important;transform:none !important}}

/* ---- hover states ---- */
.jh0:hover{color:#fff !important}
.jh1:hover{color:#02827D !important}
.jh2:hover{background:#F4F0E6 !important}
.jh3:hover{background:#F4F0E6 !important}
.jh4:hover{background:#F4F0E6 !important}
.jh5:hover{background:#F4F0E6 !important}
.jh6:hover{background:#02827D !important}
.jh7:hover{color:#02827D !important}
.jh8:hover{color:#02827D !important}
.jh9:hover{color:#02827D !important}
.jh10:hover{background:#0A938C;transform:translateY(-1px) !important}
.jh11:hover{background:#0A938C;transform:translateY(-2px) !important}
.jh12:hover{background:rgba(255,255,255,.1) !important}
.jh13:hover{gap:22px !important}
.jh14:hover{transform:scale(1.05) !important}
.jh15:hover{transform:scale(1.05) !important}
.jh16:hover{gap:22px !important}
.jh17:hover{gap:22px !important}
.jh18:hover{transform:scale(1.05) !important}
.jh19:hover{padding-left:16px !important}
.jh20:hover{padding-left:16px !important}
.jh21:hover{padding-left:16px !important}
.jh22:hover{padding-left:16px !important}
.jh23:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(4,48,45,.4) !important}
.jh24:hover{gap:18px;color:#04302D !important}
.jh25:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(4,48,45,.4) !important}
.jh26:hover{gap:18px;color:#04302D !important}
.jh27:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(4,48,45,.4) !important}
.jh28:hover{gap:18px;color:#04302D !important}
.jh29:hover{color:#6FCFC4 !important}
.jh30:hover{transform:scale(1.04) !important}
.jh31:hover{transform:scale(1.04) !important}
.jh32:hover{transform:scale(1.04) !important}
.jh33:hover{transform:scale(1.04) !important}
.jh34:hover{color:#02827D !important}
.jh35:hover{transform:translateY(-5px);box-shadow:0 28px 50px -28px rgba(4,48,45,.4) !important}
.jh36:hover{transform:translateY(-5px);box-shadow:0 28px 50px -28px rgba(4,48,45,.4) !important}
.jh37:hover{transform:translateY(-5px);box-shadow:0 28px 50px -28px rgba(4,48,45,.4) !important}
.jh38:hover{background:rgba(255,255,255,.22) !important}
.jh39:hover{background:rgba(255,255,255,.22) !important}
.jh40:hover{background:rgba(255,255,255,.22) !important}
.jh41:hover{background:#0A938C !important}
.jh42:hover{border-color:#02827D !important}
.jh43:hover{color:#fff !important}
.jh44:hover{color:#fff !important}
.jh45:hover{color:#fff !important}
.jh46:hover{color:#fff !important}
.jh47:hover{color:#fff !important}
.jh48:hover{color:#fff !important}
.jh49:hover{color:#fff !important}
.jh50:hover{color:#fff !important}
.jh51:hover{color:#fff !important}
.jh52:hover{color:#fff !important}
.jh53:hover{color:#fff !important}
.jh54:hover{color:#fff !important}
.jh55:hover{color:#6FCFC4 !important}
.jh56:hover{background:rgba(255,255,255,.28) !important}
.jh57:hover{background:#0A938C !important}
.jh58:hover{color:#02827D !important}
.jh59:hover{background:#0A938C !important}

/* client logo wall */
.ji-logo{transition:border-color .35s ease}
.ji-logo:hover{border-color:rgba(2,130,125,.45)}
.ji-logo:hover img{filter:grayscale(0) !important;opacity:1 !important}

/* cotizador selects: chevron propio con aire a la derecha */
[data-quote-panel] select{appearance:none;-webkit-appearance:none;padding-right:42px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2302827D' stroke-width='1.7'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;background-size:12px !important;cursor:pointer}


/* ===== mega menú elevado ===== */
[data-mega-panel] > div{padding:16px !important;gap:8px !important;box-shadow:0 44px 90px -44px rgba(4,48,45,.6) !important;border-color:rgba(20,32,28,.08) !important}
.jh2,.jh3,.jh4,.jh5{display:grid !important;grid-template-columns:46px 1fr !important;column-gap:15px !important;align-items:center;padding:15px 18px 15px 15px !important;border:1px solid transparent;position:relative}
.jh2 > span,.jh3 > span,.jh4 > span,.jh5 > span{grid-column:2}
.jh2::before,.jh3::before,.jh4::before,.jh5::before{content:"";grid-column:1;grid-row:1 / 3;width:46px;height:46px;background-color:rgba(2,130,125,.09);background-repeat:no-repeat;background-position:center;background-size:22px;transition:background-color .4s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.jh2::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2302827D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.52-4.48 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E")}
.jh3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2302827D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E")}
.jh4::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2302827D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E")}
.jh5::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2302827D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E")}
.jh2::after,.jh3::after,.jh4::after,.jh5::after{content:"\2192";position:absolute;top:50%;right:16px;color:#02827D;font-size:16px;opacity:0;transform:translate(-6px,-50%);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.jh2:hover,.jh3:hover,.jh4:hover,.jh5:hover{background:#F7F4EA !important;border-color:rgba(2,130,125,.2) !important}
.jh2:hover::before,.jh3:hover::before,.jh4:hover::before,.jh5:hover::before{background-color:rgba(2,130,125,.2);transform:scale(1.06)}
.jh2:hover::after,.jh3:hover::after,.jh4:hover::after,.jh5:hover::after{opacity:1;transform:translate(0,-50%)}
.jh2:hover > span:first-child,.jh3:hover > span:first-child,.jh4:hover > span:first-child,.jh5:hover > span:first-child{color:#02827D !important}

/* form: selects/inputs no desbordan su columna */
[data-quote-form] label{min-width:0}
[data-quote-panel] select,[data-quote-panel] input:not([name="website"]),[data-quote-panel] textarea{width:100%;box-sizing:border-box;min-width:0}

/* contacto: columnas alineadas arriba */
[data-contact]{align-items:start !important}


/* ===== cotizador: móvil compacto (sin scroll) ===== */
@media (max-width:640px){
  [data-quote-panel]{width:100% !important;box-shadow:none !important}
  [data-quote-panel] > div:first-child{padding:15px 20px !important}
  [data-quote-panel] > div:first-child h3{font-size:22px !important}
  [data-quote-form]{padding:16px 20px 18px !important}
  [data-quote-form] > p{font-size:13px !important;line-height:1.45 !important;margin:0 0 12px !important}
  [data-quote-form] form{gap:9px !important}
  [data-quote-form] form > div{grid-template-columns:1fr 1fr !important;gap:9px !important}
  [data-quote-panel] label span{font-size:12.5px !important}
  [data-quote-panel] input,[data-quote-panel] select,[data-quote-panel] textarea{padding:10px 12px !important;font-size:16px !important}
  [data-quote-panel] textarea{height:56px !important;min-height:0 !important}
  [data-quote-panel] [data-submit]{padding:13px !important;margin-top:2px !important}
  [data-quote-form] form > a{padding:0 !important;font-size:13px !important}
}

/* ===== hero elevado (CRO + legibilidad) ===== */
[data-hero] h1{text-shadow:0 2px 52px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}
[data-hero] [data-herocta] button:hover{transform:translateY(-3px);box-shadow:0 26px 46px -18px rgba(2,130,125,.95)}
[data-hero] [data-herocta] a:hover{background:rgba(244,240,230,.12)}
@media (max-width:920px){[data-hero]{min-height:86svh !important}}
@media (max-width:560px){
  [data-hero]{min-height:92svh !important}
  [data-hero] h1{font-size:clamp(43px,13.5vw,66px) !important;line-height:.98 !important;margin-bottom:18px !important}
  [data-hero] [data-herocta]{width:100% !important;gap:10px !important}
  [data-hero] [data-herocta] button,[data-hero] [data-herocta] a{width:100% !important;justify-content:center !important;padding:16px !important;font-size:16px !important}
}