@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

/* Header and hero calibrated to the supplied Agua Cristal mockups. */
.header-inner,.hero-content{width:min(calc(100% - 120px),1180px)}
.site-header{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 72%,rgba(255,255,255,0) 100%)}
.header-inner{height:76px}
.brand.brand-horizontal{width:165px;height:58px;gap:5px;text-decoration:none;align-items:center}
.brand-mark{display:block;flex:none;width:43px;height:48px;overflow:hidden}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-mark path{fill:none;stroke-width:4.5;stroke-linecap:round}
.brand-word{display:flex;flex-direction:column;justify-content:center;min-width:0;color:#666d6f}
.brand-word strong{font:800 2.35rem/.82 Outfit,Arial,sans-serif;letter-spacing:-.065em}
.brand-word small{margin-top:5px;color:#009383;font:700 .39rem/1 'DM Sans',Arial,sans-serif;letter-spacing:.19em;white-space:nowrap}
.desktop-nav{gap:34px;margin-right:58px}
.desktop-nav a{font-size:.96rem;font-weight:700;padding:10px 0;color:#354b50;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.desktop-nav a:hover,.desktop-nav a.active{color:#006f68}
.hero,.page-hero{min-height:clamp(520px,54.5vw,610px);background:#eef9fc}
.hero-scenery{inset:0;background:url('assets/hero-paisaje.webp') center center/cover no-repeat;opacity:1}
.hero-scenery:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.83) 20%,rgba(255,255,255,.33) 43%,rgba(255,255,255,0) 66%)}
.hero-content,.page-hero .hero-content{display:block;position:relative;z-index:2;min-height:clamp(520px,54.5vw,610px);padding-top:138px;padding-bottom:0}
.hero-copy{max-width:395px;position:relative;z-index:3}
.hero-copy .eyebrow{display:none}
.hero h1,.page-hero h1{font-size:clamp(4.15rem,7.1vw,5.55rem);line-height:.88;letter-spacing:-.055em;margin:0 0 24px;color:#6c7375;font-weight:400}
.hero h1 strong{display:inline-block;font-weight:800;color:#009e91}
.hero-copy>p:not(.eyebrow){max-width:335px;margin:0 0 24px;font-size:1.04rem;line-height:1.38;color:#565e61}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-actions .button{height:40px;min-height:40px;padding:0 20px;justify-content:space-between;font-size:.88rem}
.hero-actions .button-primary{min-width:255px}
.hero-actions .button-outline{min-width:185px}
.hero-products,.page-hero .hero-products{position:absolute;right:60px;bottom:15px;width:min(60vw,620px);height:auto;z-index:2;pointer-events:none}
.hero-products .hero-group,.page-hero .hero-products .hero-group{position:relative;display:block;width:100%;height:auto;max-width:none;right:auto;bottom:auto;transform:scaleY(1.07);transform-origin:bottom;filter:drop-shadow(6px 10px 6px rgba(28,70,76,.1))}
.hero-note{position:absolute;right:42px;top:164px;z-index:4;margin:0;color:#009e91;text-align:center;font:600 1.95rem/.79 Caveat,cursive;transform:rotate(-8deg)}
.hero-ribbons{position:absolute;left:-20px;bottom:0;z-index:1;width:43%;height:245px;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,#000 0%,#000 60%,transparent 100%)}
.hero-ribbons svg{display:block;width:100%;height:100%}

@media(max-width:800px){
  .header-inner,.hero-content{width:min(calc(100% - 42px),1180px)}
  .hero,.page-hero{min-height:720px}
  .hero-content,.page-hero .hero-content{min-height:720px;padding-top:105px}
  .hero h1,.page-hero h1{font-size:clamp(3.65rem,9vw,4.7rem)}
  .hero-products,.page-hero .hero-products{width:min(72vw,560px);right:-15px;bottom:8px;height:auto}
  .hero-note{right:0;top:370px;font-size:1.6rem}
  .hero-ribbons{width:62%;height:175px}
}
@media(max-width:600px){
  .header-inner,.hero-content{width:min(calc(100% - 32px),1180px)}
  .header-inner{height:72px}
  .brand.brand-horizontal{width:142px;height:52px;gap:4px}
  .brand-mark{width:35px;height:42px}
  .brand-word strong{font-size:1.95rem}
  .brand-word small{font-size:.33rem;letter-spacing:.15em}
  .hero,.page-hero{min-height:760px}
  .hero-content,.page-hero .hero-content{min-height:760px;padding-top:107px}
  .hero-scenery{background-position:55% center}
  .hero-scenery:after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.56) 45%,transparent 75%)}
  .hero h1,.page-hero h1{font-size:clamp(3.5rem,12vw,4.3rem)}
  .hero-copy>p:not(.eyebrow){font-size:1rem;max-width:300px}
  .hero-products,.page-hero .hero-products{width:min(108vw,430px);right:-25px;bottom:8px}
  .hero-note{right:4px;top:425px;font-size:1.45rem}
  .hero-ribbons{width:85%;height:150px}
}