/* ─── FONTS ─────────────────────────────────────────── */
@font-face {
    font-family: 'Hatton';
    src: url('../fonts/PP Hatton Ultralight 200.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Hatton';
    src: url('../fonts/PP Hatton Medium 500.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Hatton';
    src: url('../fonts/PP Hatton Bold 700.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Barnegat';
    src: url('../fonts/BARNEGAT-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
    --c-navy:   #07176E;
    --c-blue:   #24519F;
    --c-brown:  #614C3E;
    --c-beige:  #B8AFA5;
    --c-teal:   #73AB9E;
    --c-green:  #0D8080;
    --c-grey:   #C6C9D0;
    --c-white:  #FFFFFF;
    --c-ink:    #040e44;

    --f-title: 'Barnegat', 'Barlow Condensed', sans-serif;
    --f-body:  'Inter', sans-serif;
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }

body {
    font-family: var(--f-body);
    color: var(--c-navy);
    background: var(--c-white);
    overflow-x: hidden;
}

/* ─── HEADER ─────────────────────────────────────────── */
#site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    transition: background .35s, padding .35s, box-shadow .35s;
}
#site-header.solid {
    background: var(--c-navy);
    padding-block: .85rem;
    box-shadow: 0 2px 24px rgba(7,23,110,.35);
}

.hdr-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}
.hdr-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hdr-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}
.hdr-nav a {
    font-family: var(--f-title);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-white);
    transition: color .25s;
}
.hdr-nav a:hover { color: var(--c-teal); }

.hdr-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .1em;
}
.lang-switch a { color: var(--c-grey); transition: color .25s; }
.lang-switch a.on,
.lang-switch a:hover { color: var(--c-white); }
.lang-switch span { color: var(--c-teal); }

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--c-teal);
    color: var(--c-white);
    padding: .5rem 1.15rem;
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .25s;
}
.btn-wa:hover { background: var(--c-green); }
.btn-wa svg { width: 15px; height: 15px; fill: var(--c-white); flex-shrink: 0; }

/* hamburger */
.hdr-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}
.hdr-burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--c-white);
    transition: .3s;
}

/* ─── HERO ───────────────────────────────────────────── */
#hero {
    position: relative;
    height: 100vh;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .38);
}
.hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(4,  14,  68, .72) 0%,
        rgba(7,  23, 110, .32) 32%,
        rgba(13,128,128, .25) 55%,
        rgba(4,  14,  68, .80) 100%
    );
}
.hero-body {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1.5rem;
    max-width: 860px;
}
.hero-eyebrow {
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--c-beige);
    margin-bottom: 1.6rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.hero-logo {
    width: min(340px, 72vw);
    margin: 0 auto;
    filter: brightness(0) invert(1) drop-shadow(0 3px 20px rgba(0,0,0,.55));
}
.hero-logo-wrap {
    display: inline-block;
    margin-bottom: 1.8rem;
}
.hero-logo-wrap::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--c-teal);
    margin: .9rem auto 0;
}
.hero-sub {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: rgba(255, 255, 255, .88);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    letter-spacing: .02em;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--c-green);
    color: var(--c-white);
    padding: .95rem 2.4rem;
    font-family: var(--f-title);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background .25s, transform .2s;
    box-shadow: 0 4px 24px rgba(13,128,128,.5);
}
.hero-cta:hover {
    background: var(--c-teal);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(115,171,158,.5);
}
.hero-cta svg { width: 17px; height: 17px; fill: var(--c-white); }

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .55);
    font-family: var(--f-title);
    font-size: .65rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* ─── SHARED SECTION ─────────────────────────────────── */
/* eyebrow con línea decorativa antes del texto */
.s-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: 1rem;
}
.s-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.s-title {
    font-family: var(--f-title);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-navy);
    line-height: 1.05;
    margin-bottom: 1.4rem;
}
.s-lead {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--c-brown);
    max-width: 520px;
}

/* ─── EXPERIENCIA ────────────────────────────────────── */
#experiencia {
    padding: 3.5rem 2.5rem;
    background: var(--c-white);
    scroll-margin-top: 80px;
}
.exp-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--c-grey);
}
.feat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
/* cada icono usa un color diferente de la paleta */
.feat-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feat:nth-child(1) .feat-icon { background: var(--c-green); }
.feat:nth-child(2) .feat-icon { background: var(--c-navy); }
.feat:nth-child(3) .feat-icon { background: var(--c-teal); }
.feat:nth-child(4) .feat-icon { background: var(--c-brown); }
.feat-icon svg {
    width: 18px; height: 18px;
    stroke: var(--c-white);
    fill: none;
    stroke-width: 1.8;
}
.feat h4 {
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin-bottom: .3rem;
}
.feat p {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    color: var(--c-brown);
    line-height: 1.55;
}

.exp-visual { position: relative; }
.exp-visual img {
    width: 100%; height: 500px;
    object-fit: cover;
}
/* badge en verde principal — contrasta con la foto */
.exp-badge {
    position: absolute;
    bottom: -1.8rem;
    left: -1.8rem;
    background: var(--c-green);
    padding: 1.5rem 1.75rem;
    text-align: center;
}
.exp-badge .num {
    font-family: var(--f-title);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--c-white);
    line-height: 1;
}
.exp-badge .lbl {
    font-family: var(--f-title);
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-top: .35rem;
}

/* ─── GALERÍA ────────────────────────────────────────── */
#galeria { line-height: 0; }
.gal-strip {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    height: 380px;
    gap: 3px;
    background: var(--c-grey);
}
.gal-item { overflow: hidden; }
.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s ease;
}
.gal-item:hover img { transform: scale(1.06); }

/* ─── PACKS ──────────────────────────────────────────── */
/* fondo azul — diferente del navy del header/footer */
#packs {
    background: var(--c-blue);
    padding: 3.5rem 2.5rem 2.5rem;
    scroll-margin-top: 80px;
}
#packs .s-eyebrow { color: var(--c-beige); }
#packs .s-title   { color: var(--c-white); }
#packs .s-lead    { color: rgba(255,255,255,.75); max-width: none; }

.packs-wrap { max-width: 1240px; margin: 0 auto; }
.packs-header { margin-bottom: 3.5rem; }

.packs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.pack-card {
    border: 1px solid rgba(255,255,255,.15);
    padding: 2.25rem 2rem;
    transition: border-color .3s, background .3s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
/* línea de color superior en cada card */
.pack-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--c-teal); }

.pack-card:hover {
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.07);
}
.pack-n {
    font-family: var(--f-title);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 1.2rem;
    opacity: .45;
}
.pack-n { color: var(--c-teal); }

.pack-card h3 {
    font-family: var(--f-title);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 1rem;
}
.pack-card p {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .92rem;
    line-height: 1.75;
    color: rgba(255,255,255,.7);
}
.pack-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 1.75rem;
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding-bottom: .2rem;
    transition: color .25s, border-color .25s;
    border-bottom: 1px solid;
    align-self: flex-start;
}
.pack-link { color: var(--c-teal); border-color: var(--c-teal); }
.pack-link:hover { color: var(--c-white); border-color: var(--c-white); }

.barco-name a { color: inherit; text-decoration: none; transition: color .2s; }
.barco-name a:hover { color: var(--c-blue); }

/* ─── BARCOS ─────────────────────────────────────────── */
/* beige — tono cálido y neutro, contrasta con el azul de packs */
#barcos {
    background: var(--c-beige);
    padding: 3.5rem 2.5rem;
    scroll-margin-top: 80px;
}
#barcos .s-eyebrow { color: var(--c-brown); }
#barcos .s-title   { color: var(--c-navy); }
#barcos .s-lead    { color: var(--c-brown); }

.barcos-wrap { max-width: 1240px; margin: 0 auto; }
.barcos-header { margin-bottom: 2rem; }

.barcos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.barco-card {
    background: var(--c-white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.barco-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.barco-btns { margin-top: auto; }

.barco-thumb {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* ─── SLIDER (card + páginas de barco) ───────────────── */
.bslider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bslider-track {
    display: flex;
    height: 100%;
    transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.bslider-track img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.bsl-prev, .bsl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(4,14,68,.55);
    color: var(--c-white);
    border: none;
    width: 32px; height: 32px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 30px;
    text-align: center;
    transition: background .2s;
    z-index: 2;
    padding: 0;
}
.bsl-prev { left: .6rem; }
.bsl-next { right: .6rem; }
.bsl-prev:hover, .bsl-next:hover { background: var(--c-navy); }
.bsl-dots {
    position: absolute;
    bottom: .65rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .4rem;
    z-index: 2;
}
.bsl-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: background .2s;
}
.bsl-dots span.on { background: var(--c-white); }

.barco-info { padding: 2rem; }
.barco-tag {
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.barco-card:nth-child(1) .barco-tag { color: var(--c-green); }
.barco-card:nth-child(2) .barco-tag { color: var(--c-teal); }

.barco-name {
    font-family: var(--f-title);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin-bottom: 1.25rem;
}
.barco-specs {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-grey);
}
.spec-val {
    font-family: var(--f-title);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--c-navy);
}
.spec-lbl {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .82rem;
    color: var(--c-brown);
    margin-top: .1rem;
}
.barco-desc {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.75;
    color: var(--c-brown);
    margin-bottom: 1.5rem;
    height: 6.3rem;
    overflow: hidden;
}
/* píldoras de tipo de experiencia */
.barco-exp {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem;
}
.barco-exp span {
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border: 1px solid var(--c-grey);
    color: var(--c-brown);
}

/* tabla de precios */
.barco-prices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-bottom: 1.75rem;
}
.bprice {
    background: var(--c-grey);
    text-align: center;
    padding: .55rem .25rem;
}
.bp-h {
    display: block;
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-brown);
}
.bp-v {
    display: block;
    font-family: var(--f-title);
    font-size: .95rem;
    font-weight: 400;
    color: var(--c-navy);
    margin-top: .2rem;
}

/* botones del card: info (outline) + book (solid) */
.barco-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.barco-btns .btn-info,
.barco-btns .btn-book {
    height: 50px;
}
.btn-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1rem;
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid var(--c-navy);
    color: var(--c-navy);
    transition: background .25s, color .25s;
}
.btn-info:hover { background: var(--c-navy); color: var(--c-white); }
.barco-btns .btn-book { justify-content: center; }

/* botón del primer barco: navy → verde; segundo: marrón → verde */
.btn-book {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--c-green);
    color: var(--c-white);
    padding: .8rem 1.75rem;
    font-family: var(--f-title);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: background .25s;
}
.btn-book:hover { background: var(--c-teal); }

/* ─── CTA FINAL ──────────────────────────────────────── */
#cta-final {
    position: relative;
    padding: 10rem 2.5rem;
    text-align: center;
    overflow: hidden;
}
.cta-bg {
    position: absolute;
    inset: 0;
    background: url('../img/f2.jpg') center / cover no-repeat;
}
.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(4,  14, 68, .90) 0%,
        rgba(13,128,128, .55) 55%,
        rgba(4,  14, 68, .92) 100%
    );
}
.cta-body {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}
#cta-final .s-eyebrow {
    color: var(--c-beige);
    justify-content: center;
}
#cta-final .s-eyebrow::before { background: var(--c-beige); }
.cta-title {
    font-family: var(--f-title);
    font-size: clamp(3.2rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-white);
    line-height: 1.02;
    margin: 1rem 0 2rem;
    text-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.cta-sub {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: 1.1rem;
    color: rgba(255,255,255,.82);
    line-height: 1.75;
    margin-bottom: 2.75rem;
}

/* ─── FOOTER ─────────────────────────────────────────── */
footer { background: var(--c-ink); }

/* línea de color teal en la parte superior del footer */
footer::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(to right, var(--c-teal), var(--c-green), var(--c-blue));
}

.footer-top {
    max-width: 1240px;
    margin: 0 auto;
    padding: 5rem 2.5rem 4rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 3.5rem;
}
.footer-brand img { height: 44px; width: auto; margin-bottom: 1.5rem; filter: brightness(0) invert(1); }
.footer-brand p {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    line-height: 1.85;
    color: rgba(255,255,255,.82);
}

.footer-col h4 {
    font-family: var(--f-title);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--c-teal);
    margin-bottom: 1.4rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer-col ul a {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    color: rgba(255,255,255,.82);
    transition: color .25s;
}
.footer-col ul a:hover { color: var(--c-teal); }

.contact-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}
.contact-row svg {
    width: 15px; height: 15px;
    stroke: var(--c-green); fill: none; stroke-width: 1.6;
    flex-shrink: 0;
}
.contact-row a,
.contact-row span {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    color: rgba(255,255,255,.82);
    transition: color .25s;
}
.contact-row a:hover { color: var(--c-teal); }

.footer-langs {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}
.footer-langs a {
    font-family: var(--f-title);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .1em;
    padding: .3rem .8rem;
    border: 1px solid rgba(115,171,158,.3);
    color: var(--c-grey);
    transition: all .25s;
}
.footer-langs a:hover,
.footer-langs a.on {
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
}
.footer-bottom-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom-inner p {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .78rem;
    color: rgba(255,255,255,.60);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .78rem;
    color: rgba(255,255,255,.60);
    transition: color .25s;
}
.footer-legal a:hover { color: var(--c-teal); }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .exp-grid     { grid-template-columns: 1fr; gap: 4rem; }
    .packs-grid   { grid-template-columns: 1fr 1fr; }
    .footer-top   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .packs-grid   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .hdr-nav      { display: none; }
    .hdr-burger   { display: flex; }
    .packs-grid   { grid-template-columns: 1fr; }
    .barcos-grid  { grid-template-columns: 1fr; }
    .features     { grid-template-columns: 1fr; }
    .footer-top   { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-brand img { height: 36px; }
    #site-header  { padding: 1rem 1.25rem; }
    .gal-strip    { grid-template-columns: 1fr; height: auto; }
    .gal-item     { height: 220px; }
    #cta-final    { padding: 6rem 1.5rem; }
    .cta-sub br   { display: none; }
    .exp-badge    { bottom: 0; left: 0; }
    #experiencia  { padding: 0; }
    .exp-grid     { gap: 0; }
    .exp-grid > div:first-child { padding: 3rem 1.5rem 2.5rem; }
    .exp-visual img { height: 340px; }
    .btn-book     { white-space: nowrap; }
    .btn-info     { white-space: nowrap; }
    .btn-wa span  { display: none; }
    .btn-wa       { padding: .5rem .65rem; }
    #barcos       { padding: 2.5rem 1rem; }
    .barco-info   { padding: 1.25rem; }
    .barco-btns .btn-info,
    .barco-btns .btn-book { padding: .7rem .5rem; font-size: .72rem; height: auto; }
}

/* Header siempre sólido en páginas de barco */
.page-boat #site-header {
    background: var(--c-navy);
    padding-block: .85rem;
    box-shadow: 0 2px 24px rgba(7,23,110,.35);
}

/* ─── PÁGINAS DE BARCO ───────────────────────────────── */

/* Hero */
.bp-hero {
    position: relative;
    height: 65vh;
    max-height: 580px;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.bph-photo {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.bph-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(4,14,68,.92)  0%,
        rgba(4,14,68,.45) 45%,
        rgba(4,14,68,.15) 100%
    );
}
.bph-body {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}
.bp-back {
    display: block;
    font-family: var(--f-title);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: .65rem;
    transition: color .25s;
}
.bp-back:hover { color: var(--c-white); }
.bp-hero-name {
    font-family: var(--f-title);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-white);
    line-height: 1;
    margin-bottom: 1.75rem;
    text-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.bph-specs {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.bph-spec strong {
    display: block;
    font-family: var(--f-title);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--c-white);
    letter-spacing: .04em;
}
.bph-spec span {
    display: block;
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-teal);
    margin-top: .2rem;
}

/* Galería */
.bp-gallery {
    background: var(--c-grey);
    padding: 4px;
}
.bpg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 4px;
}
.bpg-grid img,
.bpg-grid video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity .25s;
}
.bpg-grid img:hover,
.bpg-grid video:hover { opacity: .88; }
.bpg-grid img:first-child { grid-column: span 2; }

/* Sección info + reserva */
.bp-info-booking {
    padding: 7rem 2.5rem;
    background: var(--c-white);
}
.bpib-wrap {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

/* Lista de specs */
.bp-speclist {
    margin-top: 2.5rem;
    border-top: 1px solid var(--c-grey);
}
.bp-speclist > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid var(--c-grey);
}
.bp-speclist span {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    color: var(--c-brown);
}
.bp-speclist strong {
    font-family: var(--f-title);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-navy);
}
.bp-speclist strong span {
    font-family: var(--f-title);
    font-weight: 400;
    color: inherit;
}

/* Tarjeta de reserva */
.bp-booking { position: sticky; top: 7rem; }
.bpb-card {
    background: var(--c-navy);
    padding: 2.5rem;
}
.bpb-title {
    font-family: var(--f-title);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.bpb-field { margin-bottom: 1.75rem; }
.bpb-label {
    display: block;
    font-family: var(--f-title);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-teal);
    margin-bottom: .75rem;
}
.bpb-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.bpb-pills .pill {
    font-family: var(--f-title);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border: 1px solid rgba(255,255,255,.2);
    background: transparent;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    transition: all .2s;
}
.bpb-pills .pill:hover { border-color: rgba(255,255,255,.5); color: var(--c-white); }
.bpb-pills .pill.on { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }

.bpb-counter { display: flex; align-items: center; gap: 1rem; }
.cnt-btn {
    width: 34px; height: 34px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--c-white);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    transition: background .2s, border-color .2s;
}
.cnt-btn:hover { background: var(--c-teal); border-color: var(--c-teal); }
.cnt-val {
    font-family: var(--f-title);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--c-white);
    min-width: 2rem;
    text-align: center;
}
.cnt-max {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: .88rem;
    color: rgba(255,255,255,.70);
}
.bpb-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin: 1.75rem 0;
}
.bpb-price-lbl {
    font-family: var(--f-title);
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
}
.bpb-price-val {
    font-family: var(--f-title);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--c-white);
    transition: opacity .2s;
}
.bpb-cta { width: 100%; justify-content: center; }
.bpb-note {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: .72rem;
    color: rgba(255,255,255,.60);
    margin-top: 1rem;
    text-align: center;
}

/* Responsive boat pages */
@media (max-width: 1100px) {
    .bpib-wrap { grid-template-columns: 1fr; gap: 3.5rem; }
    .bp-booking { position: static; }
}
@media (max-width: 768px) {
    .bpg-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .bpg-grid > * { grid-column: 1 !important; }
    .bp-info-booking { padding: 4rem 1.25rem; }
    .bph-body { padding: 2rem 1.25rem; }
    .bp-hero { height: 52vh; min-height: 320px; max-height: none; }
}

/* ─── MOBILE NAV OVERLAY ─────────────────────────────── */
#mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-navy);
    z-index: 890;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
#mobile-nav.open { display: flex; }
#mobile-nav a {
    font-family: var(--f-title);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-white);
}
#mobile-nav a:hover { color: var(--c-teal); }
#mobile-nav .mn-lang {
    display: flex; gap: .75rem;
    font-family: var(--f-title);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .15em;
}
#mobile-nav .mn-lang a { font-size: .8rem; color: var(--c-grey); }
#mobile-nav .mn-lang a.on { color: var(--c-white); }

/* ─── COOKIE BANNER ──────────────────────────────────── */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--c-ink);
    border-top: 2px solid var(--c-teal);
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform .4s ease;
}
#cookie-banner.visible { transform: translateY(0); }
.cookie-text {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: .85rem;
    color: var(--c-grey);
    flex: 1;
    min-width: 200px;
}
.cookie-text a {
    color: var(--c-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookie-btns {
    display: flex;
    gap: .65rem;
    flex-shrink: 0;
}
.cookie-accept {
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .6rem 1.5rem;
    background: var(--c-green);
    color: var(--c-white);
    border: none;
    cursor: pointer;
    transition: background .2s;
}
.cookie-accept:hover { background: var(--c-teal); }
.cookie-reject {
    font-family: var(--f-title);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .6rem 1.5rem;
    background: transparent;
    color: var(--c-grey);
    border: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    transition: all .2s;
}
.cookie-reject:hover { border-color: var(--c-grey); color: var(--c-white); }
@media (max-width: 600px) {
    #cookie-banner { padding: 1rem 1.25rem; }
    .cookie-btns { width: 100%; }
    .cookie-accept, .cookie-reject { flex: 1; text-align: center; }
}

/* ─── PÁGINAS LEGALES ────────────────────────────────────── */
.legal-hero {
    background: var(--c-navy);
    padding: 7rem 2.5rem 3.5rem;
    text-align: center;
}
.legal-hero h1 {
    font-family: var(--f-title);
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
}
.legal-hero p {
    font-family: var(--f-body);
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    margin-top: .75rem;
}
.legal-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 4rem 2.5rem 6rem;
    overflow-wrap: break-word;
    word-break: break-word;
}
.legal-body h2 {
    font-family: var(--f-title);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-navy);
    margin: 2.5rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--c-grey);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
    font-family: var(--f-body);
    font-size: .95rem;
    font-weight: 400;
    color: var(--c-brown);
    line-height: 1.8;
}
.legal-body strong { font-weight: 600; color: var(--c-navy); }
.legal-body ul { padding-left: 1.5rem; margin: .5rem 0 1rem; list-style: disc; }
.legal-body li + li { margin-top: .35rem; }
.legal-body a { color: var(--c-green); text-decoration: underline; }
.legal-placeholder {
    background: rgba(255,200,0,.18);
    border: 1px dashed #c8a000;
    border-radius: 3px;
    padding: .1rem .35rem;
    font-weight: 500;
    color: #7a6000;
}
@media (max-width: 768px) {
    .legal-hero { padding: 5.5rem 1.5rem 2.5rem; }
    .legal-body  { padding: 2.5rem 1.25rem 3.5rem; }
    .legal-body h2 { font-size: 1rem; margin: 2rem 0 .6rem; }
    .legal-body p, .legal-body li { font-size: .9rem; line-height: 1.75; }
    .footer-top { padding: 3rem 1.5rem 2.5rem; }
    .footer-bottom-inner { padding: 1.25rem 1.5rem; }
}
@media (max-width: 480px) {
    .legal-hero { padding: 5rem 1rem 2rem; }
    .legal-body  { padding: 2rem 1rem 3rem; }
}