@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root { --navy:#032f55; --ocean:#007cc3; --sky:#38c9f0; --pale:#eaf8fc; --white:#fff; --text:#163e58; --muted:#668395; --line:#d8e9f0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:#f8fcfd; font:16px/1.5 "DM Sans",Arial,sans-serif; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Manrope,Arial,sans-serif; }
.topbar { height:82px; display:flex; align-items:center; gap:25px; padding:0 max(5vw,28px); background:#fff; border-bottom:1px solid #e7f0f4; }
.brand { display:flex; align-items:center; gap:9px; color:#0075bd; text-decoration:none; font:800 15px/.85 Manrope,sans-serif; letter-spacing:1.5px; }
.brand svg { width:46px; fill:none; stroke:#0097dc; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.brand b { display:block; color:#063d6c; font-size:20px; }
.brand small { display:block; margin-top:7px; color:#6b95ae; font:italic 8px "DM Sans",sans-serif; letter-spacing:.3px; }
nav { display:flex; gap:28px; margin-left:auto; }
nav a { color:#41667c; text-decoration:none; font-size:14px; font-weight:600; }
nav a:hover { color:var(--ocean); }
.delivery-pill { margin:0; color:#41667c; font-size:13px; font-weight:600; }
.delivery-pill span { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#43bf8b; }
.cart-button { border:0; border-radius:22px; padding:10px 13px; background:#ebf8fd; color:var(--navy); cursor:pointer; font-size:16px; }
.cart-button b { margin-left:3px; padding:1px 5px; border-radius:50%; background:#ff8c3b; color:#fff; font-size:11px; }
.hero { display:grid; grid-template-columns:1.08fr .92fr; min-height:575px; overflow:hidden; background:#004e87; }
.hero-copy { padding:95px max(5vw,28px); background:radial-gradient(circle at 5% 0,#008cd4 0,transparent 38%),linear-gradient(130deg,#033d70,#00609a); }
.eyebrow { margin-bottom:13px; color:#0089ca; font-size:11px; font-weight:700; letter-spacing:1.7px; }
.light-eyebrow { color:#8cddf7; }
h1 { margin-bottom:21px; color:#fff; font-size:clamp(42px,5vw,70px); line-height:1.04; letter-spacing:-3.4px; }
h1 em { color:#76dcff; font-style:normal; }
.hero-text { max-width:470px; margin-bottom:29px; color:#d2edf6; font-size:18px; }
.primary-button { display:inline-block; padding:16px 21px; border:0; border-radius:7px; background:#fff; color:#0070b5; box-shadow:0 9px 20px #002c4d55; cursor:pointer; font:700 15px "DM Sans",sans-serif; text-decoration:none; }
.primary-button:hover { background:#e5f7fd; }
.primary-button span { margin-left:14px; font-size:18px; }
.trust-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:25px; color:#c0e2ef; font-size:12px; font-weight:600; }
.hero-art { position:relative; min-height:575px; overflow:hidden; background:radial-gradient(circle at 64% 20%,#6fe1ff 0,transparent 29%),linear-gradient(155deg,#008bc5,#005183); }
.sun { position:absolute; top:67px; right:11%; width:260px; height:260px; border-radius:50%; background:#b8f4ff; opacity:.32; }
.hill { position:absolute; bottom:-30px; border-radius:50% 50% 0 0; }
.hill-one { right:-35%; width:105%; height:230px; background:#004675; }
.hill-two { right:21%; width:105%; height:155px; background:#00689b; }
.bottle { position:absolute; z-index:1; bottom:58px; background:url("assets/bidon-de-la-roca.svg") center bottom / contain no-repeat; filter:drop-shadow(12px 16px 17px #003b604d); }
.bottle-large { left:23%; width:218px; height:310px; }
.bottle-small { left:63%; width:137px; height:195px; }
.water-ring { position:absolute; bottom:18px; left:17%; width:68%; height:45px; border:8px solid #c1f6efaa; border-radius:50%; }
.hero-seal { position:absolute; z-index:2; top:71px; right:10%; width:98px; height:98px; padding-top:27px; border:1px solid #b8edfc; border-radius:50%; color:#e0fbff; text-align:center; font-size:10px; letter-spacing:1px; transform:rotate(9deg); }
.hero-seal b { font-size:11px; }
.products-section { max-width:1180px; margin:auto; padding:95px 28px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:30px; }
.section-heading h2,.how-section h2,.cart-header h2,dialog h2 { margin-bottom:0; font-size:35px; line-height:1.15; letter-spacing:-1.7px; }
.section-heading h2 { max-width:600px; }
.section-heading p:last-child { margin:0; color:var(--muted); font-size:14px; }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 9px 25px #00608c0b; transition:transform .2s,box-shadow .2s; }
.product-card:hover { box-shadow:0 16px 30px #00608c18; transform:translateY(-4px); }
.product-visual { display:flex; align-items:center; justify-content:center; height:185px; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,#ecfaff,#d8f2fb); }
.mini-bottle { width:126px; height:139px; background:url("assets/bidon-de-la-roca.svg") center bottom / contain no-repeat; filter:drop-shadow(8px 10px 8px #26687a40); }
.product-card h3 { margin:18px 0 3px; font-size:18px; }.product-card p { height:22px; margin-bottom:18px; color:#607987; font-size:13px; }
.product-bottom,.cart-total { display:flex; align-items:center; justify-content:space-between; }.price { font:800 19px Manrope,sans-serif; }.price small { color:#607987; font:500 12px "DM Sans",sans-serif; }
.add-button { padding:9px 12px; border:1px solid #9bd9f1; border-radius:5px; background:#fff; color:#0076ba; cursor:pointer; font-weight:700; }.add-button:hover { background:#eaf8fd; }
.how-section { max-width:none; padding:85px max(5vw,28px); background:#e9f8fc; text-align:center; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; max-width:1050px; margin:30px auto 0; }.steps article { padding:24px 18px; border-radius:12px; background:#fff; }.steps b { display:block; color:#d5f0fa; font:800 44px Manrope,sans-serif; }.steps span { display:block; margin:-24px 0 9px; font-size:28px; }.steps h3 { margin-bottom:5px; font-size:16px; }.steps p { margin:0; color:#607987; font-size:14px; }
.cart-panel { position:fixed; z-index:4; top:0; right:0; display:flex; flex-direction:column; width:min(410px,100%); height:100dvh; padding:29px; background:#fff; box-shadow:-5px 0 25px #12384b22; transform:translateX(105%); transition:transform .25s ease; }.cart-panel.open { transform:translateX(0); }.backdrop { position:fixed; z-index:3; inset:0; background:#052b3c66; opacity:0; pointer-events:none; transition:opacity .25s; }.backdrop.show { opacity:1; pointer-events:auto; }.cart-header { display:flex; align-items:start; justify-content:space-between; border-bottom:1px solid var(--line); }.close-button { border:0; background:none; color:var(--text); cursor:pointer; font-size:31px; line-height:1; }.cart-items { flex:1; overflow:auto; padding:16px 0; }.empty-cart { margin-top:50px; color:#708892; text-align:center; }.cart-item { display:grid; grid-template-columns:1fr auto; gap:7px; margin-bottom:15px; }.cart-item b { font-size:14px; }.cart-item small { color:#69818c; }.quantity { display:flex; grid-column:2; align-items:center; gap:9px; }.quantity button { width:23px; height:23px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ocean); cursor:pointer; font-size:16px; }.cart-total { padding:17px 0; border-top:1px solid var(--line); }.cart-total b { font:800 21px Manrope,sans-serif; }.checkout-button,.submit-button { width:100%; background:var(--ocean); color:#fff; }.checkout-button:hover,.submit-button:hover { background:#0066a8; }.checkout-button:disabled { background:#a9bec4; box-shadow:none; cursor:not-allowed; }
dialog { width:min(590px,calc(100% - 28px)); border:0; border-radius:12px; padding:31px; color:var(--text); box-shadow:0 20px 55px #062b3b77; } dialog::backdrop { background:#052b3c99; }.dialog-close { position:absolute; top:20px; right:22px; }.dialog-intro { margin:10px 0 20px; color:#607987; } label { display:block; margin:12px 0; font-size:13px; font-weight:700; } label small { color:#708892; font-weight:400; } input,select,textarea { width:100%; margin-top:5px; padding:10px; border:1px solid #cddedc; border-radius:5px; background:#fff; color:var(--text); font:15px "DM Sans",sans-serif; } textarea { resize:vertical; }.payment-note { margin:13px 0 0; color:#69818c; font-size:12px; text-align:center; }
.payment-section { margin:23px 0 19px; padding:17px; border:1px solid #d5eaf3; border-radius:10px; background:#f4fbfe; }.payment-title { margin:0 0 11px; font:700 15px Manrope,sans-serif; }.payment-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:14px; border:1px solid #bcdcea; border-radius:6px; overflow:hidden; }.payment-tab { padding:10px; border:0; background:#fff; color:#54748a; cursor:pointer; font:700 12px "DM Sans",sans-serif; }.payment-tab + .payment-tab { border-left:1px solid #bcdcea; }.payment-tab.active { background:#007cbd; color:#fff; }.payment-help { margin:0 0 10px; color:#607987; font-size:12px; }.bank-card { overflow:hidden; margin:10px 0 13px; border-radius:9px; background:linear-gradient(125deg,#003e72,#087cb2); color:#eafeff; box-shadow:0 7px 12px #0a567226; }.bank-card-top { display:flex; justify-content:space-between; padding:10px 13px; background:#002f5d; font:700 11px Manrope,sans-serif; letter-spacing:.5px; }.bank-card p { margin:0; padding:8px 13px 0; font-size:13px; line-height:1.35; }.bank-card .bank-email { padding-bottom:12px; color:#a8eafa; font-size:12px; }.hidden { display:none; }.checkout-note { display:flex; gap:10px; margin-bottom:13px; padding:12px; border-radius:7px; background:#fff; color:#527184; font-size:12px; line-height:1.35; }.checkout-note span { font-size:20px; }.checkout-note p { margin:0; }.checkout-note b { color:#163e58; font-size:13px; }.checkout-total { display:flex; justify-content:space-between; margin:16px 0 0; padding-top:14px; border-top:1px solid #cae2ed; font-weight:700; }.checkout-total b { color:#0068aa; font:800 20px Manrope,sans-serif; }
@media (max-width:720px) { .topbar { height:70px; padding:0 18px; }.brand { font-size:13px; }.brand b { font-size:16px; }.brand svg { width:35px; }.brand small,nav,.delivery-pill { display:none; }.cart-button { margin-left:auto; }.hero { grid-template-columns:1fr; }.hero-copy { padding:64px 28px 48px; }.hero-art { min-height:300px; }.hero-seal { top:30px; right:9%; transform:scale(.75) rotate(9deg); }.bottle-large { left:20%; width:177px; height:255px; }.bottle-small { left:62%; width:106px; height:151px; }.products-section,.how-section { padding:60px 20px; }.section-heading { display:block; }.section-heading h2 { font-size:29px; }.section-heading p:last-child { margin-top:14px; }.products-grid,.steps { grid-template-columns:1fr; }.steps { gap:18px; }.product-visual { height:155px; } }