.banner{background:linear-gradient(135deg,#0a3d62 0%,#1e90ff 40%,#38cfd9 70%,#b8f1ff 100%);background-size:200% 200%;animation:agua 6s ease infinite;text-align:center}@keyframes agua{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}main{font-family:"Bree Serif",serif;font-weight:400;font-style:normal}.btn-buy{background:#fff;color:#0077b6;font-weight:700;padding:14px 28px;border-radius:40px;box-shadow:0 10px 25px rgb(0 0 0 / .2);border:none;margin-top:20%}.price-card,.zone-card{transition:transform 0.2s ease-in-out}.price-card:hover,.zone-card:hover{transform:translateY(-5px)}footer{background-color:#111;color:#ccc}footer a{color:#ccc;text-decoration:none}footer a:hover{color:#fff}section{scroll-margin-top:100px}.price-card img {width: 300px;height: 300px;object-fit: contain;}
/* Pulido visual para la identidad de Agua ESCRIVA */
:root {
    --escriva-ink: #12344a;
    --escriva-blue: #087eae;
    --escriva-mist: #f1f9fb;
    --escriva-shadow: 0 14px 38px rgba(13, 67, 91, .11);
}

html { scroll-behavior: smooth; }
body { color: #294354; background: #fff; -webkit-font-smoothing: antialiased; }
::selection { color: #fff; background: var(--escriva-blue); }

.navbar.sticky-top {
    background: rgba(7, 43, 66, .96) !important;
    box-shadow: 0 5px 22px rgba(5, 34, 51, .18);
    backdrop-filter: blur(12px);
}
.navbar-brand img { width: auto; max-width: 150px; height: 38px; object-fit: contain; }
.navbar .nav-link {
    margin: 0 .22rem; padding: .7rem .85rem !important; border-radius: 999px;
    color: rgba(255,255,255,.82) !important;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus-visible {
    color: #fff !important; background: rgba(81, 200, 212, .16); transform: translateY(-1px);
}

.banner {
    position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 1rem 3rem;
    background-image: radial-gradient(ellipse at 14% 12%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, #073b5c 0%, #087eae 45%, #37b8ca 76%, #b8edf1 125%);
    background-size: 200% 200%;
}
.banner::after {
    position: absolute; right: -7rem; bottom: -13rem; width: 27rem; height: 27rem;
    border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255,255,255,.045), 0 0 0 70px rgba(255,255,255,.035);
    content: ""; pointer-events: none;
}
.banner > .container, .banner > .row { position: relative; z-index: 1; }
.banner > .container img { filter: drop-shadow(0 12px 18px rgba(5, 40, 58, .14)); }
.banner h1 { margin: .4rem auto 1rem; font-size: clamp(1.8rem, 4vw, 3rem); text-shadow: 0 2px 16px rgba(0,0,0,.16); }
.banner h2 { font-size: clamp(1.1rem, 2.5vw, 1.65rem); }
.banner h2 a { color: #fff; text-underline-offset: .2em; }
.banner .btn-success, .bg-primary .btn-success {
    padding: .8rem 1.45rem; border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 9px 22px rgba(4, 48, 42, .22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.banner .btn-success:hover, .bg-primary .btn-success:hover {
    transform: translateY(-3px); box-shadow: 0 14px 28px rgba(4, 48, 42, .28); filter: saturate(1.12);
}

main > section:not(.banner) { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
main h2 { color: var(--escriva-ink); }
main section.bg-light, main .bg-light { background-color: var(--escriva-mist) !important; }
main .bg-primary { background: linear-gradient(120deg, #07547d, #0a91b2 72%, #39b8c7) !important; }
main .bg-primary h2, main .bg-primary p { color: #fff; }

.hero { color: #345366; }
.hero > h2 { max-width: 820px; margin: 0 auto 1rem; text-align: center; }
.hero > p { max-width: 800px; text-align: center; }
.hero li { transition: color .2s ease, transform .2s ease; }
.hero li:hover { color: var(--escriva-blue); transform: translateY(-2px); }
.hero a:not(.btn) { color: #0877a3; text-decoration-thickness: 1px; text-underline-offset: .18em; }

.card, .price-card, .zone-card {
    overflow: hidden; border: 1px solid rgba(15, 100, 130, .1); border-radius: 1.1rem;
    background: #fff; box-shadow: 0 5px 18px rgba(13, 67, 91, .055);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.price-card:hover, .zone-card:hover, .card:hover {
    transform: translateY(-6px); border-color: rgba(8, 126, 174, .28); box-shadow: var(--escriva-shadow);
}
.price-card img {
    max-width: 100%; height: 250px; margin-top: 1rem; padding: .8rem;
    transition: transform .3s ease;
}
.price-card:hover img { transform: scale(1.045); }
.price-card .card-body { max-width: 35rem; padding: 1.1rem 1.4rem 1.5rem; }
.zone-card > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.zone-card .card-body { padding: 1.45rem 1.2rem; }
.zone-card svg { transition: transform .2s ease; }
.zone-card:hover svg { transform: translateY(-3px) scale(1.06); }
.zone-card h3 { color: var(--escriva-ink); }
.zone-card p { line-height: 1.55; }

form {
    padding: clamp(1.25rem, 4vw, 2.2rem); border: 1px solid rgba(15, 100, 130, .1);
    border-radius: 1.2rem; background: #fff; box-shadow: var(--escriva-shadow);
}
.form-label { color: var(--escriva-ink); font-weight: 700; }
.form-control, .form-select {
    min-height: 48px; border-color: #d5e5eb; border-radius: .7rem; background-color: #fbfdfe;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
textarea.form-control { min-height: 120px; }
.form-control:focus, .form-select:focus {
    border-color: #36afc4; background-color: #fff; box-shadow: 0 0 0 .22rem rgba(54, 175, 196, .17);
}
form .btn-success { min-height: 48px; border-radius: .7rem; transition: transform .2s ease, box-shadow .2s ease; }
form .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(25, 135, 84, .2); }

.accordion { overflow: hidden; border-radius: 1rem; box-shadow: 0 8px 26px rgba(13, 67, 91, .07); }
.accordion-item { border-color: #e3eef2; }
.accordion-button { padding: 1.15rem 1.3rem; color: var(--escriva-ink); font-weight: 700; }
.accordion-button:not(.collapsed) { color: #08749a; background: #eaf7fa; box-shadow: inset 4px 0 #39b8c7; }
.accordion-button:focus { box-shadow: inset 4px 0 #39b8c7, 0 0 0 .2rem rgba(54, 175, 196, .13); }
.accordion-body { color: #496576; line-height: 1.75; }

main .row.text-center.g-3 > [class*="col-"] > a:not(.card a) {
    display: flex; min-height: 100%; align-items: center; justify-content: center;
    padding: .9rem .75rem; border: 1px solid #e1edf1; border-radius: .85rem; background: #fff;
    color: #17627f; font-weight: 600; line-height: 1.4; text-decoration: none;
    box-shadow: 0 4px 14px rgba(13, 67, 91, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
main .row.text-center.g-3 > [class*="col-"] > a:not(.card a):hover {
    transform: translateY(-3px); border-color: #82cbd5; color: #07547d;
    box-shadow: 0 9px 22px rgba(13, 67, 91, .1);
}

footer { background: #082f47; color: #cfdee5; }
footer a { color: #cfdee5; transition: color .18s ease; }
footer a:hover { color: #75dce2; }
footer .border-top { border-color: rgba(255,255,255,.18) !important; }
a:focus-visible, button:focus-visible { outline: 3px solid #65d2dc; outline-offset: 3px; }

@media (max-width: 767.98px) {
    .banner { padding: 2rem .75rem 2.5rem; }
    .banner > .container img { max-height: 190px; }
    .banner .row { text-align: center; }
    .hero ul { gap: .65rem !important; }
    .navbar .nav-link { margin: .12rem 0; }
    .price-card img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}