/* Self-hosted: no request leaves the visitor's browser to Google. */
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ_5Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ_5Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- IBM Plex Mono (self-hosted) — datos técnicos ---- */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl1FgtIU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl9FgtIU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   THE OCEAN'S FISHER — sistema de diseño
   Dirección de arte: "Marfil Atlántico" — papel marfil, tinta oxblood,
   latón de sextante. Un lujo que se demuestra con coordenadas y récords.

   CAMBIAR DE PALETA = cambiar SOLO el bloque de tokens de abajo.
   Alternativas B y C incluidas al final del bloque, comentadas.
   ===================================================================== */

:root{
  /* ---------- PALETA A · MARFIL ATLÁNTICO (activa) ---------- */
  --bg:        #F7F2E7;   /* hueso cálido */
  --bg-2:      #EBE0C8;   /* arena */
  --text:      #1C2624;   /* tinta marina */
  --text-dim:  #576059;   /* gris salvia */
  --accent:    #875A1F;   /* latón */
  --cta:       #6B2434;   /* oxblood */

  /* derivados (se recalculan solos al cambiar de paleta) */
  --bg-3:      #dfd2b4;
  --accent-2:  #a8763a;
  --accent-3:  #d9b982;
  --cta-2:     #7f2b3e;
  --line:      rgba(var(--rgb-tk),.16);
  --line-2:    rgba(var(--rgb-tk),.08);
  --on-ink:    #F7F2E7;              /* texto sobre bloque de tinta */
  --on-ink-dim:rgba(var(--rgb-on),.68);
  --line-ink:  rgba(var(--rgb-on),.18);
  --line-ink-2:rgba(var(--rgb-on),.09);

  /* ---------- tipografía ---------- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---------- ritmo: base 8 px ---------- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad:  clamp(20px, 4.4vw, 68px);
  --maxw: 1320px;
  --sec-y: clamp(64px, 9vw, 160px);

  /* ---------- motion (según guion: sutil y físico) ---------- */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.25,.46,.45,.94);
  --r: 999px;

  /* tripletes RGB — permiten opacidades sin fijar el color */
  --rgb-bg: 247,242,231;
  --rgb-tk: 28,38,36;
  --rgb-on: 247,242,231;
  --rgb-ac: 135,90,31;
  --rgb-cta: 107,36,52;
  --rgb-scrim: 12,18,17;   /* velo sobre foto: SIEMPRE oscuro, no sigue la paleta */
  --ink-block: #1C2624;                 /* fondo de las secciones oscuras */
  --glass: rgba(247,242,231,.85);       /* barra al hacer scroll */
  --glass-solid: rgba(247,242,231,.97); /* panel de submenú */
}

/* ── PALETA D · NOCHE ATLÁNTICA (la de theoceansfisher.com publicada) ──
   Para activarla: quita los delimitadores de este bloque. */
:root{
  --bg:#07141b; --bg-2:#0a1d26; --bg-3:#0e2530;
  --text:#eaf1f0; --text-dim:#9fb3b2;
  --accent:#c9a96a; --cta:#c9a96a;
  --accent-2:#d8bd86; --accent-3:#e3d0a4; --cta-2:#d8bd86;
  --line:rgba(201,169,106,.20); --line-2:rgba(234,241,240,.08);
  --on-ink:#eaf1f0; --on-ink-dim:rgba(234,241,240,.68);
  --line-ink:rgba(201,169,106,.20); --line-ink-2:rgba(234,241,240,.08);
  --rgb-bg:7,20,27; --rgb-tk:234,241,240; --rgb-on:234,241,240;
  --rgb-ac:201,169,106; --rgb-cta:201,169,106;
  --rgb-scrim:4,12,17;
  --ink-block:#0a1d26;
  --glass:rgba(7,20,27,.88); --glass-solid:rgba(10,29,38,.97);
}
/* El botón principal es oro: su texto debe ser el azul abisal, no hueso. */
.btn{color:#07141b}
.btn--sec{color:var(--text)}
.mm-scrim{background:rgba(3,10,14,.9)}

/* ── ALTERNATIVA B · VERDE ABISMAL (oscuro) ───────────────────────────
:root{
  --bg:#081A16; --bg-2:#123128; --text:#F1ECDD; --text-dim:#9FB3A9;
  --accent:#C9A227; --cta:#2FBFA0;
  --bg-3:#1b4536; --accent-2:#d8b652; --accent-3:#e6d296; --cta-2:#3fd0b0;
  --line:rgba(241,236,221,.16); --line-2:rgba(241,236,221,.08);
  --on-ink:#F1ECDD; --on-ink-dim:rgba(241,236,221,.68);
  --line-ink:rgba(241,236,221,.18); --line-ink-2:rgba(241,236,221,.09);
}
   ── ALTERNATIVA C · PLATA DE MARLÍN (mixto) ─────────────────────────
   Nota del guion: en la C el texto tenue sobre fondo claro usa #5E6467,
   y el petróleo #2E4B54 NUNCA como texto sobre grafito.
:root{
  --bg:#F0EFEA; --bg-2:#e4e3dd; --text:#1B2023; --text-dim:#5E6467;
  --accent:#2E4B54; --cta:#C97A3F;
  --bg-3:#d3d2cb; --accent-2:#3d6270; --accent-3:#8fb0ba; --cta-2:#d98c52;
  --line:rgba(27,32,35,.16); --line-2:rgba(27,32,35,.08);
  --on-ink:#F4F1E9; --on-ink-dim:rgba(244,241,233,.7);
  --line-ink:rgba(244,241,233,.18); --line-ink-2:rgba(244,241,233,.09);
}
   ─────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--cta);color:var(--bg)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:400;background:var(--cta);
  color:var(--bg);padding:12px 22px;border-radius:var(--r);font:600 12px/1 var(--sans);
  transition:top .3s var(--ease)}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ═══════════════ TIPOGRAFÍA ═══════════════
   Fraunces variable: SOFT/WONK altos SOLO en H1/H2 grandes. Nunca negrita gruesa. */
.kicker{display:inline-flex;align-items:center;gap:12px;font:500 9.5px/1 var(--mono);
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:'';width:34px;height:1px;background:var(--accent);flex:none}
.kicker.plain::before{display:none}

h1,.h1{font-family:var(--serif);font-weight:500;font-size:clamp(35px,5.4vw,80px);line-height:1.02;
  letter-spacing:-.03em;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 40,"WONK" 1}
h2,.h2{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.7vw,52px);line-height:1.08;
  letter-spacing:-.024em;font-variation-settings:"SOFT" 30,"WONK" 1}
h3,.h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.55vw,23px);line-height:1.25;
  letter-spacing:-.01em;font-variation-settings:"SOFT" 0,"WONK" 0}
h4{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.4}
em.f{font-style:italic;color:var(--accent);font-weight:400}
.lede{font-size:clamp(15.5px,1.22vw,18.5px);line-height:1.7;color:var(--text-dim);max-width:60ch}
.small{font-size:13.5px;line-height:1.65;color:var(--text-dim)}
.mono{font-family:var(--mono)}
.label{font:500 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.num{font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums}

/* ═══════════════ HEADER — pill flotante, encoge y opaca al scroll ═══════════════ */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;
  width:calc(100% - 28px);max-width:1380px;border-radius:var(--r);
  padding:10px 10px 10px 20px;background:transparent;border:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),padding .45s var(--ease),top .45s var(--ease)}
.nav.is-stuck{top:8px;padding:5px 6px 5px 16px;
  background:var(--glass);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-color:rgba(var(--rgb-ac),.24);box-shadow:0 10px 40px rgba(var(--rgb-tk),.14)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{position:relative;width:35px;height:35px;border-radius:50%;background:var(--ink-block);
  display:grid;place-items:center;flex:none;transition:width .45s var(--ease),height .45s var(--ease)}
.nav.is-stuck .brand-mark{width:31px;height:31px}
.brand-mark svg{width:21px;height:21px;fill:var(--accent-3)}
.brand-mark::after{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(var(--rgb-tk),.14);transition:box-shadow .3s}
.brand:hover .brand-mark::after{box-shadow:0 0 0 5px rgba(var(--rgb-ac),.26)}
.brand-txt{font-family:var(--serif);font-weight:500;font-size:14px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.brand-txt small{display:block;font:500 6.5px/1.9 var(--mono);letter-spacing:.22em;color:var(--text-dim)}

.nav-links{display:flex;align-items:center;gap:1px;list-style:none}
.nav-links a{position:relative;display:block;padding:10px 13px;border-radius:var(--r);
  font:500 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);
  white-space:nowrap;transition:color .26s,background .26s,transform .26s var(--ease-io)}
.nav-links a:hover{color:var(--text);transform:translateY(-1px)}
.nav-links a[aria-current="page"]{color:var(--text);background:rgba(var(--rgb-tk),.06)}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:50%;bottom:4px;
  width:13px;height:2px;border-radius:2px;background:var(--cta);transform:translateX(-50%)}
.nav-end{display:flex;align-items:center;gap:11px;flex:none}
.lang{display:flex;align-items:center;gap:6px;font:500 9px/1 var(--mono);letter-spacing:.1em;
  color:var(--text-dim)}
.lang a{transition:color .25s}
.lang a:hover{color:var(--accent)}
.lang a[aria-current="true"]{color:var(--text)}
.burger{display:none;place-items:center;width:41px;height:41px;border-radius:50%;
  border:1px solid var(--line);background:transparent;cursor:pointer;transition:.25s}
.burger:hover{border-color:var(--accent);color:var(--accent)}
.burger svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}

/* Sobre un hero oscuro la navbar arranca en claro; al quedarse fija vuelve a tinta.
   Solo en páginas marcadas con .dark-hero — si no, sería claro sobre claro. */
.dark-hero .nav:not(.is-stuck) .brand-txt{color:var(--on-ink)}
.dark-hero .nav:not(.is-stuck) .brand-txt small{color:rgba(var(--rgb-on),.62)}
.dark-hero .nav:not(.is-stuck) .brand-mark{background:rgba(var(--rgb-on),.16)}
.dark-hero .nav:not(.is-stuck) .brand-mark::after{box-shadow:0 0 0 2px rgba(var(--rgb-on),.18)}
.dark-hero .nav:not(.is-stuck) .nav-links a{color:rgba(var(--rgb-on),.82)}
.dark-hero .nav:not(.is-stuck) .nav-links a:hover{color:var(--on-ink)}
.dark-hero .nav:not(.is-stuck) .nav-links a[aria-current="page"]{color:var(--on-ink);
  background:rgba(var(--rgb-on),.14)}
.dark-hero .nav:not(.is-stuck) .lang{color:rgba(var(--rgb-on),.62)}
.dark-hero .nav:not(.is-stuck) .lang a[aria-current="true"]{color:var(--on-ink)}
.dark-hero .nav:not(.is-stuck) .burger{border-color:rgba(var(--rgb-on),.32);color:var(--on-ink)}

.mm{position:fixed;inset:0;z-index:300;opacity:0;pointer-events:none;transition:opacity .4s}
.mm.open{opacity:1;pointer-events:auto}
.mm-scrim{position:absolute;inset:0;background:rgba(var(--rgb-scrim),.90);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.mm-panel{position:absolute;top:0;left:0;right:0;background:var(--bg);padding:22px var(--pad) 34px;
  border-bottom-left-radius:32px;border-bottom-right-radius:32px;
  transform:translateY(-101%);transition:transform .55s var(--ease);max-height:100dvh;overflow:auto}
.mm.open .mm-panel{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mm-close{display:grid;place-items:center;width:41px;height:41px;border-radius:50%;
  border:1px solid var(--line);background:transparent;cursor:pointer}
.mm-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}
.mm-panel nav a{display:flex;align-items:baseline;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line-2);font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,6.4vw,30px);line-height:1.25;letter-spacing:-.02em}
.mm-panel nav a i{font:500 8.5px/1 var(--mono);letter-spacing:.18em;color:var(--accent);font-style:normal}
.mm-panel nav a[aria-current="page"]{color:var(--cta)}
.mm-panel .btn{width:100%;margin-top:22px;padding-block:16px}

/* ═══════════════ BOTONES ═══════════════
   primario = CTA oxblood · secundario = borde latón · terciario = subrayado que se dibuja */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;padding:14px 22px;border-radius:var(--r);
  border:1px solid var(--cta);background:var(--cta);color:var(--bg);
  font:600 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;box-shadow:0 8px 26px rgba(var(--rgb-cta),.24);
  transition:transform .4s var(--ease-io),box-shadow .35s var(--ease-io),
             background .3s,border-color .3s}
.btn::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  transform:translateY(100%);transition:transform .5s var(--ease-io)}
.btn:hover{transform:scale(1.03) translateY(-1px);box-shadow:0 15px 36px rgba(var(--rgb-cta),.34);
  background:var(--cta-2)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.98)}
.btn>*{position:relative;z-index:1}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .35s var(--ease-io)}
.btn:hover svg{transform:translate(2px,-2px)}

.btn--sec{background:transparent;border-color:var(--accent);color:var(--text);box-shadow:none}
.btn--sec:hover{background:transparent;border-color:var(--text);box-shadow:0 8px 22px rgba(var(--rgb-tk),.1)}
.btn--sm{padding:11px 17px;font-size:9px}
/* El botón secundario sobre fondo de tinta: si no se fuerza el color, hereda
   var(--text) y queda tinta sobre tinta — invisible. Cubre closer y sec--ink. */
.on-ink .btn--sec,.closer .btn--sec,.sec--ink .btn--sec,.foot .btn--sec{
  border-color:var(--accent-3);color:var(--on-ink)}
.on-ink .btn--sec:hover,.closer .btn--sec:hover,.sec--ink .btn--sec:hover{
  border-color:var(--on-ink);color:var(--on-ink)}

/* terciario: el subrayado se dibuja de izquierda a derecha */
.tlink{display:inline-flex;align-items:center;gap:8px;font:500 9.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-bottom:8px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease),color .28s}
.tlink:hover{background-size:100% 1px;color:var(--cta)}
.tlink svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.on-ink .tlink{color:var(--accent-3)}
.on-ink .tlink:hover{color:var(--on-ink)}

/* ═══════════════ SECCIONES ═══════════════ */
.sec,h1,h2,h3,[id]{scroll-margin-top:96px}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:clamp(40px,5vw,80px)}
.sec--sand{background:var(--bg-2)}
.sec--ink{background:var(--ink-block);color:var(--on-ink)}
.on-ink,.sec--ink{color:var(--on-ink)}
.sec--ink .lede,.on-ink .lede{color:var(--on-ink-dim)}
.sec--ink .kicker,.on-ink .kicker{color:var(--accent-3)}
.sec--ink .kicker::before,.on-ink .kicker::before{background:var(--accent-3)}
.sec--ink .label,.on-ink .label{color:rgba(var(--rgb-on),.55)}
.sec--ink em.f,.on-ink em.f{color:var(--accent-3)}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:var(--s3);margin-bottom:clamp(28px,3.6vw,48px)}
.sec--ink .sec-head{border-color:var(--line-ink)}
.sec-head .l{max-width:64ch}
.sec-head h2{margin-top:var(--s2)}
.sec-head .lede{margin-top:var(--s2)}

/* ═══════════════ HERO a pantalla completa ═══════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(120px,15vh,180px) clamp(28px,4vh,48px);overflow:hidden;color:var(--on-ink)}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--text)}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%}
.hero-video{opacity:0;transition:opacity 1.2s var(--ease)}
.hero-video.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--rgb-scrim),.92) 4%,rgba(var(--rgb-scrim),.55) 42%,rgba(var(--rgb-scrim),.34) 100%)}
.hero-in{position:relative;z-index:2}
.hero-motto{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(14px,1.35vw,19px);color:var(--accent-3);margin-top:var(--s3)}  /* va DESPUÉS del lede */
.hero h1{max-width:19ch}
.hero .lede{color:var(--on-ink-dim);margin-top:var(--s3);max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s4)}
.hero-facts{position:relative;z-index:2;margin-top:clamp(32px,6vh,64px)}
.hero-facts .facts{border-color:var(--line-ink)}
.hero-facts .facts>div span{color:rgba(var(--rgb-on),.6)}
.hero-facts .facts>div b i{color:var(--accent-3)}

/* ═══════════════ THIS SEASON ═══════════════ */
.season{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:start;
  border:1px solid var(--accent);padding:clamp(24px,3vw,40px)}
.season-tag .label{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--cta);
  letter-spacing:.28em;white-space:nowrap}
@media (max-width:700px){
  .season{grid-template-columns:1fr}
  .season-tag .label{writing-mode:horizontal-tb;transform:none}
}

/* caja de la carta de análisis */
.chartbox{border:1px solid var(--line-ink);position:relative;aspect-ratio:16/11;overflow:hidden;
  background:rgba(var(--rgb-on),.03)}
.chartbox svg{position:absolute;inset:0;width:100%;height:100%}

/* bloque explícitamente pendiente — imposible publicarlo por descuido */
.pending{border:1px dashed var(--cta);padding:clamp(20px,2.6vw,34px);background:rgba(var(--rgb-cta),.04)}

/* ═══════════════ BREADCRUMBS ═══════════════ */
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  font:500 8.5px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.45}

/* ═══════════════ FIGURAS — foto real, sin filtros ═══════════════ */
figure.plate{position:relative;overflow:hidden;background:var(--bg-3);margin:0}
figure.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
figure.plate:hover img{transform:scale(1.04)}
figure.plate figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 15px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  background:linear-gradient(transparent,rgba(var(--rgb-scrim),.88) 62%);
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:12.5px;line-height:1.45;
  color:rgba(var(--rgb-on),.94)}
figure.plate figcaption b{font:500 8px/1 var(--mono);letter-spacing:.16em;color:var(--accent-3);
  font-style:normal;white-space:nowrap}
.ratio-45{aspect-ratio:4/5}
.ratio-11{aspect-ratio:1/1}
.ratio-32{aspect-ratio:3/2}
.ratio-43{aspect-ratio:4/3}
.ratio-169{aspect-ratio:16/9}
.ratio-219{aspect-ratio:21/9}

/* ═══════════════ REJILLAS ═══════════════ */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.2vw,72px);align-items:center}
.split--rev{grid-template-columns:.95fr 1.05fr}

.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px;
  background:var(--bg);border:1px solid var(--line);
  transition:border-color .3s,transform .4s var(--ease-io),box-shadow .4s var(--ease-io)}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 18px 44px rgba(var(--rgb-tk),.1)}
.card .n{font:500 8.5px/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.card p{font-size:13.5px;line-height:1.65;color:var(--text-dim)}
.card .go{margin-top:auto;padding-top:10px;font:500 8.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);transition:color .3s}
.card:hover .go{color:var(--cta)}
.sec--ink .card{background:transparent;border-color:var(--line-ink)}
.sec--ink .card p{color:var(--on-ink-dim)}
.sec--ink .card:hover{border-color:var(--accent-3);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.sec--sand .card{background:var(--bg)}

/* ═══════════════ SPEC CARD — ficha náutica, cifras a la derecha ═══════════════ */
.spec{border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.spec dt,.spec .k{font:500 8.5px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim)}
.spec dd,.spec .v{font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums;
  text-align:right;margin:0}
.sec--ink .spec{border-color:var(--line-ink)}
.sec--ink .spec div{border-color:var(--line-ink-2)}
.sec--ink .spec .k{color:rgba(var(--rgb-on),.55)}

.facts{display:flex;gap:clamp(18px,3vw,46px);flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:var(--s3)}
.on-ink .facts,.sec--ink .facts{border-color:var(--line-ink)}
.facts>div span{display:block;font:500 7.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px}
.on-ink .facts>div span,.sec--ink .facts>div span{color:rgba(var(--rgb-on),.55)}
.facts>div b{font-family:var(--mono);font-weight:400;font-size:clamp(16px,1.5vw,21px);line-height:1;
  font-variant-numeric:tabular-nums}
.facts>div b i{font-style:normal;color:var(--accent)}
.on-ink .facts>div b i,.sec--ink .facts>div b i{color:var(--accent-3)}

.datalist{list-style:none}
.datalist li{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.sec--ink .datalist li{border-color:var(--line-ink-2)}
.datalist .n{font-family:var(--mono);font-size:10.5px;color:var(--accent)}
.sec--ink .datalist .n{color:var(--accent-3)}
.datalist .t{font-size:14.5px;line-height:1.4}
.datalist .t i{display:block;font:500 7.5px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);font-style:normal;margin-top:4px}
.sec--ink .datalist .t i{color:rgba(var(--rgb-on),.5)}
.datalist .w{width:clamp(44px,5.4vw,78px);height:2px;background:var(--bg-3);position:relative}
.sec--ink .datalist .w{background:rgba(var(--rgb-on),.16)}
.datalist .w i{position:absolute;inset:0 auto 0 0;background:var(--accent);display:block}
.sec--ink .datalist .w i{background:var(--accent-3)}

.quote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(16px,1.6vw,23px);line-height:1.45;border-left:2px solid var(--cta);padding-left:22px}
.sec--ink .quote{border-color:var(--accent-3)}

/* ═══════════════ CTA DE CIERRE (en todas las páginas) ═══════════════ */
.closer{background:var(--ink-block);color:var(--on-ink);text-align:center;
  padding-block:clamp(56px,7vw,110px)}
.closer h2{max-width:22ch;margin:var(--s2) auto var(--s3)}
.closer .lede{margin:0 auto var(--s4);color:var(--on-ink-dim)}
.closer .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══════════════ FAQ ═══════════════ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;
  gap:18px;align-items:baseline;font-family:var(--serif);font-weight:500;
  font-size:clamp(15px,1.3vw,19px);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cta)}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--accent);font-size:15px}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 0 22px;font-size:14px;line-height:1.75;color:var(--text-dim);max-width:76ch}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:var(--ink-block);color:var(--on-ink);padding-block:clamp(48px,6vw,80px) 26px}
.foot-g{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:clamp(18px,2.6vw,40px)}
.foot .foot-h{font:500 8px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--rgb-on),.55);margin-bottom:17px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot a{font-size:13px;color:rgba(var(--rgb-on),.8);transition:color .25s}
.foot a:hover{color:var(--accent-3)}
.foot-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-ink-2);margin-top:clamp(30px,4vw,52px);padding-top:22px;
  font:500 8px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--rgb-on),.5)}

/* ═══════════════ MOTION — fade + 14px, 500ms, stagger 60-90ms ═══════════════ */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}

/* ═══════════════ RESPONSIVE ═══════════════ */
/* Enlaces horizontales solo desde 1330 px. Medido: con el nombre completo
   (The Ocean's Fisher, 41 px más que antes) a 1280 se solapaban con el botón
   de promoción. Por debajo, botón MENÚ. */
@media (max-width:1329px){
  .nav-links{display:none}
  .burger{display:grid}
  .lang{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-g{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .split,.split--rev,.g3{grid-template-columns:1fr}
  .split--rev>figure{order:-1}
}
@media (max-width:620px){
  .g2,.g4,.foot-g{grid-template-columns:1fr}
  .nav{top:10px;width:calc(100% - 20px)}
  .brand-txt small{display:none}
}

/* ═══════════════ MOTOR DE RESERVAS ═══════════════ */
.bk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,56px);align-items:start}
.bk-panel{border:1px solid var(--line);padding:clamp(20px,2.6vw,32px);background:var(--bg)}
.bk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.bk-top h3{font-size:clamp(16px,1.5vw,20px)}
.bk-nav{display:flex;gap:6px}
.bk-nav button{width:34px;height:34px;border:1px solid var(--line);background:transparent;cursor:pointer;
  border-radius:50%;font-family:var(--mono);font-size:13px;transition:.22s}
.bk-nav button:hover{border-color:var(--accent);color:var(--accent)}
.bk-cal-head,.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cal-head span{text-align:center;font:500 8px/2.2 var(--mono);letter-spacing:.16em;color:var(--text-dim)}
.bk-d{position:relative;aspect-ratio:1;border:1px solid var(--line-2);background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:.2s;padding:0}
.bk-d--pad{border:0;cursor:default}
.bk-n{font:400 13px/1 var(--mono)}
.bk-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.bk-d.is-part .bk-dot{background:var(--accent-3)}
.bk-d:hover:not(:disabled){border-color:var(--accent);background:var(--bg-2)}
.bk-d.is-sel{background:var(--cta);border-color:var(--cta);color:var(--bg)}
.bk-d.is-sel .bk-dot{background:var(--bg)}
.bk-d.is-off{opacity:.28;cursor:not-allowed}
.bk-d.is-off .bk-dot{background:var(--text-dim)}
.bk-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:var(--s2);
  font:500 7.5px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.bk-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:var(--s3) 0}
.bk-slot{border:1px solid var(--line);background:transparent;padding:13px 8px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;transition:.22s;text-align:center}
.bk-slot b{font:500 10.5px/1.3 var(--sans)}
.bk-slot i{font:500 7.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-style:normal}
.bk-slot:hover:not(:disabled){border-color:var(--accent)}
.bk-slot.is-sel{background:var(--ink-block);border-color:var(--ink-block);color:var(--on-ink)}
.bk-slot.is-sel i{color:var(--accent-3)}
.bk-slot:disabled{opacity:.34;cursor:not-allowed}
.bk-hint{font:500 8.5px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
  grid-column:1/-1;text-align:center;padding:14px 0}
.bk-field{margin-bottom:var(--s2)}
.bk-field label{display:block;font:500 7.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:7px}
.bk-field input,.bk-field select,.bk-field textarea{width:100%;border:1px solid var(--line);background:transparent;
  padding:12px 14px;font:400 14px/1.4 var(--sans);color:var(--text);transition:border-color .22s}
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{outline:none;border-color:var(--accent)}
.bk-field textarea{min-height:88px;resize:vertical}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:var(--s3)}
.bk-mode label{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);padding:13px;cursor:pointer;
  font-size:12.5px;line-height:1.4;transition:.22s}
.bk-mode label:hover{border-color:var(--accent)}
.bk-mode input{margin-top:2px;accent-color:var(--cta)}
.bk-mode input:checked+span{color:var(--text)}
.bk-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--s2);font-size:12.5px;line-height:1.5;
  color:var(--text-dim)}
.bk-consent input{margin-top:3px;accent-color:var(--cta)}
.bk-consent a{color:var(--accent);text-decoration:underline}
.bk-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:14px 0;margin:var(--s3) 0}
.bk-total span{font:500 8px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.bk-total b{font:400 clamp(22px,2.4vw,32px)/1 var(--mono)}
.bk-msg{font:500 11px/1.5 var(--sans);margin-top:var(--s2);min-height:18px}
.bk-msg.is-err{color:var(--cta)}
.bk-done{text-align:center;padding:clamp(30px,5vw,64px) 0}
@media (max-width:900px){.bk{grid-template-columns:1fr}.bk-row,.bk-mode{grid-template-columns:1fr}}

/* ═══════════════ CARRUSEL DEL HERO ═══════════════ */
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-slide.is-on{opacity:1}
.hero-slide img,.hero-slide picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%}
.hero-dots{position:absolute;z-index:3;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);
  display:flex;gap:9px}
.hero-dots button{width:30px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(var(--rgb-on),.35);transition:background .3s,width .3s}
.hero-dots button[aria-selected="true"]{background:var(--accent-3);width:46px}
.hero-dots button:hover{background:rgba(var(--rgb-on),.7)}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Selector de idioma dentro del menú móvil: sin esto no había forma
   de cambiar de idioma en teléfono (el .lang de cabecera se oculta ≤1180px). */
.mm-lang{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.mm-lang-opts{display:flex;gap:10px;margin-top:var(--s2)}
.mm-lang-opts a,.mm-lang-opts span{flex:1;text-align:center;padding:13px 10px;
  border:1px solid var(--line);border-radius:var(--r);
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);transition:.22s}
.mm-lang-opts a:hover{border-color:var(--accent);color:var(--text)}
.mm-lang-opts a[aria-current="true"]{background:var(--ink-block);border-color:var(--ink-block);color:var(--on-ink)}
.mm-lang-opts span[aria-disabled]{opacity:.4}

/* ═══════════════ ÍNDICE DE SECCIONES (arriba de cada página) ═══════════════ */
.pindex{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s3) 0;margin-top:var(--s5)}
.pindex .label{margin-bottom:var(--s2)}
.pindex ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px}
.pindex a{display:flex;align-items:baseline;gap:11px;padding:11px 13px;
  font-family:var(--serif);font-weight:500;font-size:15px;line-height:1.3;letter-spacing:-.01em;
  border:1px solid transparent;transition:.24s var(--ease-io)}
.pindex a .n{font:500 8.5px/1 var(--mono);letter-spacing:.16em;color:var(--accent);flex:none}
.pindex a:hover{border-color:var(--accent);background:var(--bg-2);transform:translateY(-1px)}
.pindex a:hover .n{color:var(--cta)}
@media (max-width:620px){ .pindex ol{grid-template-columns:1fr} .pindex a{font-size:14px;padding:10px 12px} }

/* ═══ TARJETA CON FOTO (rejilla de especies) ═══ */
.card--img{padding:0;overflow:hidden}
.card--img .card-ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-3)}
.card--img .card-ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.card--img:hover .card-ph img{transform:scale(1.06)}
.card--img .card-ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--rgb-scrim),.30),transparent 55%)}
.card--img>.n{padding:18px 22px 0}
.card--img>h3{padding:0 22px}
.card--img>p{padding:0 22px}
.card--img>.spec{margin-top:auto;padding:0 22px}
.card--img>.go{padding:10px 22px 20px}
@media (max-width:620px){ .card--img .card-ph{aspect-ratio:16/9} }

/* ═══════════════ SUBMENÚS DE NAVEGACIÓN ═══════════════ */
.nav-links .has-sub{position:relative}
.nav-links .caret{display:inline-block;width:4px;height:4px;margin-left:6px;vertical-align:1px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .25s,opacity .25s;opacity:.55}
.nav-links .has-sub:hover .caret,.nav-links .has-sub.open .caret{opacity:1;transform:rotate(225deg) translate(-2px,-2px)}
.subm{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:var(--glass-solid);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(var(--rgb-ac),.24);border-radius:18px;padding:8px;
  box-shadow:0 18px 50px rgba(var(--rgb-tk),.2);
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.has-sub:hover .subm,.has-sub.open .subm,.has-sub:focus-within .subm{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.subm::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px} /* puente al pasar el ratón */
.subm-all{display:block;padding:9px 13px;border-radius:12px;
  font:500 8.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--line-2);margin-bottom:4px}
.subm-all:hover{background:var(--bg-2)}
.subm ul{list-style:none;display:flex;flex-direction:column;gap:1px}
.subm ul a{display:block;padding:10px 13px;border-radius:12px;white-space:nowrap;
  font-family:var(--serif);font-weight:500;font-size:14.5px;letter-spacing:-.01em;color:var(--text);
  transition:background .2s,color .2s}
.subm ul a:hover{background:var(--bg-2);color:var(--cta)}
.subm ul a[aria-current="page"]{color:var(--cta);background:rgba(var(--rgb-cta),.07)}
.dark-hero .nav:not(.is-stuck) .subm{background:rgba(var(--rgb-tk),.96);border-color:rgba(217,185,130,.28)}
.dark-hero .nav:not(.is-stuck) .subm ul a{color:var(--on-ink)}
.dark-hero .nav:not(.is-stuck) .subm ul a:hover{background:rgba(var(--rgb-on),.1);color:var(--accent-3)}
.dark-hero .nav:not(.is-stuck) .subm-all{color:var(--accent-3);border-color:var(--line-ink-2)}
.dark-hero .nav:not(.is-stuck) .subm-all:hover{background:rgba(var(--rgb-on),.08)}

/* móvil: hijas listadas bajo cada silo */
.mm-sub{display:flex;flex-direction:column;gap:1px;padding:6px 0 12px 30px;
  border-bottom:1px solid var(--line-2)}
.mm-sub a{font-family:var(--sans) !important;font-weight:400 !important;font-size:14px !important;
  padding:8px 0 !important;border:0 !important;color:var(--text-dim) !important;line-height:1.4 !important}
.mm-sub a:hover{color:var(--accent) !important}
.mm-sub a[aria-current="page"]{color:var(--cta) !important}

/* =====================================================================
   REFUERZO MÓVIL
   Va al final a propósito: son correcciones que deben ganar a lo
   anterior. Cada bloque arregla un problema concreto de móvil real,
   no de emulador.
   ===================================================================== */

/* --- 1 · Muescas y barras de gestos (iPhone X en adelante) ----------
   Sin esto, en horizontal el contenido se mete debajo de la muesca y
   la barra inferior tapa los botones. */
@supports (padding: max(0px)) {
  .wrap, .nav-in, .mm-in {
    padding-left:  max(var(--pad, 20px), env(safe-area-inset-left));
    padding-right: max(var(--pad, 20px), env(safe-area-inset-right));
  }
  .mm { padding-bottom: env(safe-area-inset-bottom); }
}

/* --- 2 · Zonas táctiles ---------------------------------------------
   Apple pide 44 px y Google 48 dp de lado mínimo. Los enlaces de
   submenú del móvil se quedaban en ~30 px: se fallaba el dedo. */
@media (max-width: 1180px) {
  .mm a, .mm-lang a, .nav a, .foot a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mm-sub a {
    min-height: 44px !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center;
  }
  .foot a { min-height: 40px; }   /* el pie es denso: 40 basta y no lo estira */
}

/* --- 3 · Nada de retardo ni de zoom accidental al tocar ------------- */
a, button, .btn, [role="tab"], summary, label {
  touch-action: manipulation;              /* quita el retardo de 300 ms */
  -webkit-tap-highlight-color: rgba(var(--rgb-ac), .18);
}

/* --- 4 · Campos de formulario ---------------------------------------
   Safari en iOS hace zoom automático sobre cualquier campo con menos
   de 16 px. El zoom descoloca la página y el usuario abandona. */
input, select, textarea, button {
  font-size: 16px;
  font-family: inherit;
}
input, select, textarea { max-width: 100%; }

/* --- 5 · Nunca scroll horizontal ------------------------------------
   Una sola tabla o un bloque ancho hace que TODA la página se mueva de
   lado. En vez de esconderlo con overflow:hidden en el body (que rompe
   position:sticky), se hace que cada bloque ancho gestione lo suyo. */
.spec, table, pre { max-width: 100%; }
table, pre { overflow-x: auto; display: block; }
.g4, .g3, .g2 { min-width: 0; }
.card, .card * { min-width: 0; overflow-wrap: anywhere; }

/* --- 6 · Menú móvil: que el scroll no arrastre la página de detrás -- */
.mm { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* --- 7 · Móvil en horizontal ----------------------------------------
   Un teléfono girado tiene ~380 px de alto útil: un hero a 100vh deja
   el contenido invisible y parece que la web no ha cargado. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 460px; height: auto; }
  .hero-in { padding-top: 84px; padding-bottom: 40px; }
}

/* --- 8 · Pantallas muy estrechas (360 px y menos) -------------------
   Todavía son muchísimos Android en el mercado. */
@media (max-width: 380px) {
  h1 { font-size: clamp(30px, 9vw, 40px); }
  .btn { padding: 13px 18px; font-size: 13px; }
  .row { flex-direction: column; align-items: stretch; }
  .row .btn { justify-content: center; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- 9 · Las fotos, enteras y sin saltos ----------------------------
   <picture> mete un elemento intermedio: si no se le dice nada, el
   object-fit del <img> deja de aplicarse bien y aparecen huecos. */
picture { display: contents; }
.plate img, .card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
img { max-width: 100%; height: auto; }

/* =====================================================================
   ARREGLO — la barra superior se salía de la pantalla en móvil.
   El contenido de .nav-in medía 524 px dentro de una caja de 353: el
   botón del menú acababa en x=494 sobre una pantalla de 375, es decir,
   fuera. Por eso no había forma de abrir el menú desde el teléfono.
   La causa: los hijos de .nav-in no encogían (min-width:auto por
   defecto en flex) y el CTA seguía ocupando sitio aunque ya está
   repetido dentro del menú desplegable.
   ===================================================================== */
@media (max-width: 1180px) {
  .nav-in { width: 100%; min-width: 0; gap: 10px; justify-content: space-between; flex-wrap: nowrap; }
  .nav-in > * { min-width: 0; }

  .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .brand > span:not(.brand-mark), .brand small, .brand b {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  .brand-mark { flex: 0 0 auto; }

  .nav-end { flex: 0 0 auto; margin-left: auto; gap: 8px; }
  /* El CTA ya aparece dentro del menú móvil: aquí sólo robaba espacio. */
  .nav-end .btn { display: none; }
  .burger, .nav-burger { flex: 0 0 auto; position: static; }
}

/* En pantallas estrechas, el eslogan bajo el nombre sobra: lo que importa
   es que quepan el nombre y el botón del menú. */
@media (max-width: 420px) {
  .brand small, .brand .brand-sub { display: none !important; }
}

/* --- Menú móvil en acordeón -----------------------------------------
   El nombre de la sección es enlace; la flecha despliega sus apartados.
   Así el menú cabe en una pantalla en vez de ser un muro de 26 enlaces. */
.mm-item { border-bottom: 1px solid var(--line-2); }
.mm-row { display: flex; align-items: center; gap: 8px; }
.mm-row > a { flex: 1 1 auto; min-width: 0; border: 0 !important; }
.mm-tog {
  flex: 0 0 auto; width: 48px; min-height: 48px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-dim); transition: transform .25s, color .2s;
}
.mm-tog:hover, .mm-tog:focus-visible { color: var(--accent); }
.mm-tog[aria-expanded="true"] { transform: rotate(180deg); color: var(--accent); }
.mm-item .mm-sub { border-bottom: 0 !important; }
.mm-sub[hidden] { display: none !important; }

/* --- Marco con la proporción real de cada foto ----------------------
   El contenedor toma la forma exacta del archivo, así no se recorta
   nada. Pero una foto muy vertical (762x1518, por ejemplo) ocuparía dos
   pantallas de alto: se le pone tope y se centra. La imagen se ve
   entera y a un tamaño razonable. */
.plate[style*="aspect-ratio"] {
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .plate[style*="aspect-ratio"] { max-height: 68vh; }
}
.plate[style*="aspect-ratio"] img { object-fit: cover; }

/* Dentro de una retícula (.split) los márgenes auto del marco lo encogen a 0:
   ahí el marco ocupa la columna entera y la altura sale de la proporción. */
.split > .plate[style*="aspect-ratio"] { width: 100%; margin-inline: 0; max-height: none; }
/* Foto muy vertical (capitán): en escritorio manda la altura y el ancho sale
   de la proporción; en móvil manda el ancho. Nunca se recorta. */
.split > .plate--tall[style*="aspect-ratio"] { width: auto; height: min(90vh, 1000px); justify-self: end; }
@media (max-width: 700px) {
  .split > .plate--tall[style*="aspect-ratio"] { width: 100%; height: auto; justify-self: stretch; }
}

/* --- Vídeo con fachada ---------------------------------------------- */
.vid { position: relative; overflow: hidden; border-radius: var(--r2, 14px);
  background: var(--bg-3); margin: 0; max-height: 76vh; width: auto;
  max-width: 100%; margin-inline: auto; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-play { position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.vid-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--rgb-scrim), .55); color: #fff;
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28);
  transition: transform .25s, background .25s; }
.vid-play:hover .vid-btn, .vid-play:focus-visible .vid-btn {
  transform: scale(1.09); background: var(--cta); color: var(--bg); }
.vid figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px; font-family: var(--serif); font-style: italic;
  font-size: 14px; color: #fff;
  background: linear-gradient(transparent, rgba(var(--rgb-scrim), .78)); }

/* --- Botón de menú con palabra ---------------------------------------
   Tres rayas solas no todo el mundo las lee como "menú". Con la palabra
   al lado no hay duda, que es lo que importa en móvil. */
.burger { display: inline-flex; align-items: center; gap: 8px;
  width: auto; padding: 0 12px; min-height: 44px; }
.burger-txt { font-family: var(--mono, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
@media (max-width: 380px) { .burger-txt { display: none; } .burger { padding: 0 10px; } }

/* =====================================================================
   TARJETAS — que la foto se vea ENTERA
   El marco era 4:3 (y 16:9 en móvil) con recorte forzado, pero la mitad
   de las fotos de especie son verticales: el atún rojo es 1013x1552 y el
   aleta amarilla 870x1600. Meter eso en un marco apaisado y recortar
   significa enseñar el torso de alguien en vez del pez.
   Solución: marco 4:5 (vertical, que es la forma que más se repite) y
   la imagen se ajusta DENTRO en vez de recortarse. Nada se corta nunca,
   y las tarjetas mantienen todas la misma altura.
   ===================================================================== */
.card--img .card-ph { background: var(--bg-3); aspect-ratio: 4 / 3; }
.card--img .card-ph img,
.g4 .card-ph img, .g3 .card-ph img, .g2 .card-ph img {
  object-fit: cover !important;
}
/* El velo oscuro de encima estorba cuando la foto no llena el marco. */
.card--img .card-ph::after { opacity: .35; }
.card--img:hover .card-ph img { transform: scale(1.03); }

/* En móvil, mismo criterio: nada de 16:9 recortando verticales. */

/* En pantallas anchas las tarjetas son estrechas: un pelín menos altas. */


/* Los idiomas van los primeros del menú móvil: es de lo que más se busca
   y estaba al final, después de 26 enlaces. Se le da presencia de bloque. */
.mm-lang { order: -1; margin: 0 0 18px; padding: 14px 0 16px;
  border-top: 0; border-bottom: 1px solid var(--line); }
.mm-lang .label { display: block; margin-bottom: 9px; }
.mm-lang-opts a, .mm-lang-opts span { min-height: 44px; display: inline-flex;
  align-items: center; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); }
.mm-lang-opts a[aria-current="true"] { background: var(--accent); color: var(--bg);
  border-color: var(--accent); font-weight: 600; }

/* Alturas libres: con marcos a medida, forzar la misma altura volvería a
   recortar. Alineadas arriba se lee como una retícula editorial. */
.g4, .g3, .g2 { align-items: stretch; }   /* todas la misma altura */

/* ---------------------------------------------------------------------
   PROMOCIÓN DE 7 DÍAS · botón de cabecera y tarjeta del menú móvil
   Estaba enterrada en el desplegable de Charter, que es tanto como no
   estar. Se saca fuera, con color propio, para que no se lea como un
   enlace más de navegación.
   --------------------------------------------------------------------- */
.promo-pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 13px;border-radius:999px;
  font:600 12.5px/1 var(--font-ui,inherit);letter-spacing:.02em;
  color:var(--ink,#0b1a24);background:var(--accent-3,#e8b84b);
  border:1px solid rgba(0,0,0,.14);text-decoration:none;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.promo-pill:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.promo-pill:focus-visible{outline:2px solid var(--accent-3,#e8b84b);outline-offset:3px}

.mm-promo{
  display:block;margin:var(--s3) 0;padding:16px 18px;border-radius:14px;
  background:var(--accent-3,#e8b84b);color:var(--ink,#0b1a24);text-decoration:none;
}
.mm-promo-k{display:block;font:700 10.5px/1 var(--font-ui,inherit);
  letter-spacing:.14em;text-transform:uppercase;opacity:.72;margin-bottom:5px}
.mm-promo strong{display:block;font-size:18px;line-height:1.22;margin-bottom:4px}
.mm-promo-p{display:block;font-size:13px;line-height:1.35;opacity:.82}

/* En móvil el pill de cabecera sobra: la tarjeta del menú es mucho más
   visible y ahí compite con el botón de menú por un espacio que no hay. */
/* Con `.promo-pill` a secas no gana: hay una regla de la cabecera con más
   especificidad que le impone display:flex. Se cualifica con .nav-end. */
@media (max-width: 900px){ .nav-end .promo-pill{ display:none } }

/* ---------------------------------------------------------------------
   CABECERA: que quepa todo con el botón de promoción
   Al meter «Ver promoción» junto a «Reservar» la fila pasó a medir 133 px
   más que su caja y el botón de menú se salía de la pantalla. En vez de
   quitar el botón —que es el que más margen deja— se aprieta lo que sobra.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  .nav-in { gap: 10px }
  .nav-links a { padding: 10px 9px }          /* 13 → 9: ~64 px recuperados */
  .nav-end { gap: 8px }
  .promo-pill { padding: 7px 11px; font-size: 12px }
  /* El menú puede encogerse; los botones de la derecha no. OJO: sin overflow:hidden,
     que recortaba los desplegables (.subm, absolutos) y los dejaba invisibles. */
  .nav-in > nav { min-width: 0; overflow: visible }
  .nav-end { flex: 0 0 auto }
}

/* Medido: con los dos botones la fila necesita 1300 px y a 1280 solo hay
   1205 — se pasaba 95. El corte estaba en 1250, justo por debajo del ancho
   donde fallaba. Se sube a 1430 con margen: hasta ahí manda la promoción y
   reservar sigue a un toque en el menú, además de la llamada a la acción
   propia que lleva cada página. */
/* (la regla que oculta Disponibilidad entre 901 y 1430 px está al FINAL del archivo:
   debe ir detrás de la de alturas iguales, que tiene la misma especificidad) */

/* Red de seguridad: pase lo que pase, la fila no empuja hacia fuera. */
@media (min-width: 901px) {
  .nav-in { flex-wrap: nowrap }
  .nav-in > nav { flex: 0 1 auto; min-width: 0 }
  .nav-links { flex-wrap: nowrap }
}

/* ---------------------------------------------------------------------
   El botón de menú parecía estar FUERA de la barra de cristal.
   No se salía: le sobraban 79 px de aire por detrás. La regla de zona
   segura (la del notch del iPhone) aplicaba `--pad` —68 px en pantallas
   anchas— también a .nav-in, y el pill YA tiene su propio margen interior.
   El resultado era el margen aplicado dos veces y el botón flotando.
   Aquí se conserva la protección del notch y se quita el doble margen.
   --------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  .nav-in {
    padding-left:  env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ---------------------------------------------------------------------
   Alturas de la fila derecha, iguales entre sí.
   Medido: oferta 36 px, reservar 37 y el botón de menú 44. Los centros
   verticales coincidían, pero tres alturas distintas seguidas se leen como
   descuadre. Una sola altura para los tres y la fila queda a escuadra.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  .nav .nav-end .promo-pill,
  .nav .nav-end .btn,
  .nav .nav-end .burger {
    height: 40px;
    min-height: 0;
    box-sizing: border-box;
    /* 50 % en un botón de 83×40 da una elipse, no una pastilla: desentonaba
       al lado de los otros dos. El mismo radio que la barra. */
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding-block: 0;
  }
  .nav-end .lang { align-self: center }
}

/* ---------------------------------------------------------------------
   El logo se veía pequeño y apagado sobre la barra. Se agranda, se
   redondea —está dibujado en círculo— y se le quita el fondo cuadrado
   que traía la imagen, que era lo que lo hacía parecer un recorte.
   --------------------------------------------------------------------- */
.brand-mark img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(var(--rgb-ac), .35);
}
@media (max-width: 900px) { .brand-mark img { width: 40px; height: 40px } }

/* El logo no crecía: la imagen pedía 44 px pero el contenedor .brand-mark
   medía 35 (y 31 al hacer scroll), así que la encajonaba. Se agranda el
   contenedor, que es quien manda. */
.brand-mark { width: 46px; height: 46px }
.nav.is-stuck .brand-mark { width: 40px; height: 40px }
.brand-mark img { width: 100%; height: 100% }
@media (max-width: 900px) {
  .brand-mark { width: 42px; height: 42px }
  .nav.is-stuck .brand-mark { width: 38px; height: 38px }
}

/* El logo seguía costando de ver sobre la barra oscura. Se agranda otro paso
   y se le da un fondo claro tenue detrás, que es lo que hace que el dibujo
   dorado se despegue del fondo en vez de fundirse con él. */
.brand-mark { width: 52px; height: 52px }
.nav.is-stuck .brand-mark { width: 46px; height: 46px }
.brand-mark img {
  border-radius: 50%;
  background: rgba(var(--rgb-on), .10);
  box-shadow: 0 0 0 1.5px rgba(var(--rgb-ac), .55), 0 2px 10px rgba(0,0,0,.35);
}
@media (max-width: 900px) {
  .brand-mark { width: 46px; height: 46px }
  .nav.is-stuck .brand-mark { width: 42px; height: 42px }
}

/* «OCEAN'S FISHER» en el pie era casi ilegible: heredaba un color muy
   apagado sobre fondo oscuro. Se le sube el contraste al del texto normal. */
.foot .brand-txt { color: var(--on-ink); opacity: 1 }
.foot .brand-txt small { color: var(--on-ink-dim) }
.foot .brand { opacity: 1 }

/* ---------------------------------------------------------------------
   ORDENADOR (≥1280 px). A la izquierda, logo + enlaces pegados al logo; a la
   derecha, promoción + disponibilidad + icono de menú (el selector de idioma
   vive dentro del menú). Medido a 1280: fila de 1205 px disponibles.
   Va al final del archivo porque las reglas de alturas iguales (.nav .nav-end .*)
   tienen la misma especificidad.
   --------------------------------------------------------------------- */
@media (min-width: 1330px) {
  .nav-in { justify-content: flex-start; gap: 8px }
  .nav-in > nav { flex: 0 1 auto; min-width: 0; margin-right: auto; overflow: visible }
  .nav-links a { padding: 10px 6px; letter-spacing: .11em }
  .nav-end { margin-left: auto; gap: 8px; flex: 0 0 auto }
  .nav .nav-end .lang { display: none }
  .nav .nav-end .promo-pill, .nav .nav-end .btn { display: inline-flex }
  .nav .nav-end .burger .burger-txt { display: none }
  .nav .nav-end .burger { width: 44px; padding: 0; justify-content: center }
}

/* ---------------------------------------------------------------------
   LOGO CON CONTRASTE (petición del cliente). El PNG es transparente y el
   dibujo —azul marino y dorado— se fundía con la barra oscura. Un disco
   marfil detrás, anillo dorado y un halo suave lo despegan del fondo en
   todos los estados (hero oscuro, barra pegada al hacer scroll). Un punto
   más grande: 50 px (44 al pegarse), 44 en móvil.
   --------------------------------------------------------------------- */
.brand-mark,
.dark-hero .nav:not(.is-stuck) .brand-mark {
  background: #f7f2e7;
  box-shadow: 0 0 0 2px rgba(217,185,130,.9), 0 0 18px rgba(217,185,130,.35), 0 4px 14px rgba(0,0,0,.35);
}
.brand-mark::after,
.dark-hero .nav:not(.is-stuck) .brand-mark::after { box-shadow: none }
.brand:hover .brand-mark { box-shadow: 0 0 0 3px rgba(217,185,130,1), 0 0 26px rgba(217,185,130,.5), 0 4px 14px rgba(0,0,0,.35) }
.brand-mark img,
.dark-hero .nav:not(.is-stuck) .brand-mark img { box-shadow: none; background: transparent; padding: 2px; box-sizing: border-box; object-fit: contain }
.brand-mark { width: 50px; height: 50px }
.nav.is-stuck .brand-mark { width: 44px; height: 44px }
@media (max-width: 900px) {
  .brand-mark { width: 44px; height: 44px }
  .nav.is-stuck .brand-mark { width: 40px; height: 40px }
}

/* ---------------------------------------------------------------------
   Desplegable de la oferta (cabecera, lado derecho). Reutiliza .subm, pero
   anclado a la derecha: a la izquierda se salía de la pantalla.
   --------------------------------------------------------------------- */
.nav-end .promo-wrap { position: relative; display: inline-flex }
.nav-end .promo-pill .caret {
  display: inline-block; width: 4px; height: 4px; margin-left: 7px; vertical-align: 1px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .25s, opacity .25s;
}
.nav-end .promo-wrap:hover .promo-pill .caret { opacity: 1; transform: rotate(225deg) translate(-2px,-2px) }
.subm--end { left: auto; right: 0; transform: translateY(-6px); min-width: 268px }
.has-sub:hover .subm--end,
.has-sub.open .subm--end,
.has-sub:focus-within .subm--end { transform: translateY(0) }
.subm-price { padding: 10px 13px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px }
.subm-price b { display: block; font-family: var(--serif); font-size: 19px; color: var(--cta) }
.subm-price span { display: block; font: 500 10.5px/1.7 var(--mono); letter-spacing: .06em; color: var(--text-dim) }
.dark-hero .nav:not(.is-stuck) .subm--end .subm-price span { color: rgba(var(--rgb-on),.7) }
.dark-hero .nav:not(.is-stuck) .subm--end .subm-price { border-color: var(--line-ink-2) }
@media (max-width: 1049px) { .nav-end .subm--end { display: none } }

/* Apertura del desplegable de la oferta, con reglas propias. */
.nav-end .promo-wrap .subm--end { opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.nav-end .promo-wrap:hover .subm--end,
.nav-end .promo-wrap:focus-within .subm--end,
.nav-end .promo-wrap.open .subm--end { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------------------------------------------------------------------
   AVISO DE OFERTA AL ENTRAR
   Barra baja, no cubre el contenido y se puede cerrar. Va abajo a propósito:
   un cartel que tapa la página en móvil lo penaliza Google como intersticial
   intrusivo. Se enseña una vez por visita (sessionStorage), no en cada clic.
   --------------------------------------------------------------------- */
.promo-bar { position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 250;
  width: min(680px, calc(100% - 24px)); display: none; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px; border-radius: 16px;
  background: var(--glass-solid); backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(var(--rgb-ac), .3); box-shadow: 0 18px 50px rgba(var(--rgb-tk), .22);
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.promo-bar.show { display: flex; }
.promo-bar.in { opacity: 1; transform: translateY(0); }
.promo-bar-txt { flex: 1 1 auto; min-width: 0 }
.promo-bar-k { display: block; font: 500 8.5px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px }
.promo-bar-t { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.35; color: var(--text) }
.promo-bar-t b { color: var(--cta) }
.promo-bar .btn { flex: 0 0 auto }
.promo-bar-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
  background: none; cursor: pointer; color: var(--text-dim); font-size: 17px; line-height: 1;
  display: grid; place-items: center; transition: color .2s, border-color .2s }
.promo-bar-x:hover { color: var(--text); border-color: var(--accent) }
@media (max-width: 620px) {
  .promo-bar { gap: 10px; padding: 11px 11px 11px 14px; align-items: flex-start; flex-wrap: wrap }
  .promo-bar-t { font-size: 14px }
  .promo-bar .btn { order: 3; width: 100% ; justify-content: center }
}
@media (prefers-reduced-motion: reduce) { .promo-bar { transition: none } }

/* ---------------------------------------------------------------------
   La oferta, visible siempre. En móvil la barra no da para "Oferta 2026",
   así que se queda en "Oferta" y, en pantallas muy estrechas, el nombre de
   la marca deja sitio: el logo ya lo lleva dentro.
   --------------------------------------------------------------------- */
.promo-corto { display: none }
@media (max-width: 900px) {
  .nav .nav-end .promo-pill { display: inline-flex; padding: 0 12px; font-size: 11.5px; letter-spacing: .04em }
  .nav .nav-end .promo-pill .promo-largo { display: none }
  .nav .nav-end .promo-pill .promo-corto { display: inline }
  .nav .nav-end .promo-pill .caret { display: none }
}
/* En móvil el nombre no cabe a 14 px con el espaciado de escritorio: pedía
   197 px y solo tenía 112, así que salía cortado. En vez de esconderlo (que
   dejaba un hueco negro al lado del logo) se reduce el cuerpo y el espaciado,
   con lo que entra entero. Solo en pantallas muy estrechas se retira, y ahí se
   quita también el hueco entre logo y texto. */
@media (max-width: 520px) {
  .nav .nav-in .brand-txt { font-size: 11.5px; letter-spacing: .09em }
  .nav .nav-end { gap: 7px }
  .nav .nav-end .promo-pill { padding: 0 11px }
}
@media (max-width: 359px) {
  .nav .nav-in .brand .brand-txt { display: none }
  .nav .nav-in .brand { gap: 0 }
}

/* En móvil el calendario de reserva se pulsa con el dedo, no con el ratón.
   Las flechas de mes medían 34 px y los días 38: por debajo de los 44 que
   recomienda Apple, y en una rejilla de siete columnas se falla el día de
   al lado. Hay sitio: a 375 px cada columna mide 53. */
@media (max-width: 620px) {
  .bk-nav button { width: 44px; height: 44px }
  /* Aquí no se puede tocar el ancho: siete columnas de 44 px más el relleno
     del panel piden 394 y la pantalla tiene 375, así que la página se iba de
     lado. Se suelta la proporción cuadrada y se crece solo a lo alto, que es
     donde de verdad se falla el dedo al recorrer el mes. */
  .bk-d { aspect-ratio: auto; min-height: 44px }
  .promo-bar-x { width: 44px; height: 44px }
}

/* ---------------------------------------------------------------------
   EL NOMBRE DE LA MARCA EN MÓVIL.
   Salía cortado con puntos suspensivos: "THE OCEAN'S …". Medido, el
   nombre pedía 144 px y solo tenía 136, y en la barra sobraban 20 que
   se quedaban en el hueco del medio porque .brand no podía crecer.
   A 375 px no cabe de ninguna manera en una línea sin dejar la letra
   ilegible, así que el nombre va partido en dos mitades que no se
   cortan nunca: la barra las pone en una línea si caben y en dos si no,
   con "The Ocean's" arriba y "Fisher" debajo. En escritorio no cambia
   nada, porque ahí caben de sobra en la misma línea.
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .brand { flex: 1 1 auto; }
  .nav-in > .brand .brand-txt {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.12;
  }
  .brand-txt .brand-l1,
  .brand-txt .brand-l2 { white-space: nowrap; display: inline-block; }
}

/* Con el nombre en dos líneas, el eslogan de debajo dejaba la cabecera en
   tres pisos y muy apretada. La regla que lo ocultaba a 620 px la pisaba
   otra posterior de la misma especificidad, así que aquí se retira con una
   más concreta. Por encima de 620 px el nombre cabe en una línea y el
   eslogan se queda como estaba. */
@media (max-width: 620px) {
  .nav-in > .brand .brand-txt small { display: none; }
}

/* Por debajo de 359 px el nombre se escondía del todo, porque en una sola
   línea no había manera de que cupiera y dejaba un hueco negro al lado del
   logo. Partido en dos líneas sí cabe: "The Ocean's" pide 90 px y ahí hay
   118 libres. Se recupera. */
@media (max-width: 359px) {
  .nav .nav-in .brand .brand-txt { display: block; letter-spacing: .045em; }
  .nav .nav-in .brand { gap: 9px; }
}

/* Bloque de contacto del pie. El teléfono y el correo estaban solo en el
   JSON-LD; ahora se ven, y en móvil el número es pulsable. */
.foot-nap {
  margin-top: 16px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.9;
  color: var(--on-ink-dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.foot-nap a {
  color: var(--on-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--rgb-on), .28);
  align-self: flex-start;
  transition: color .2s, border-color .2s;
}
.foot-nap a:hover { color: var(--accent-3); border-color: var(--accent-3) }
@media (max-width: 620px) {
  /* Diana táctil: el número se pulsa con el dedo para llamar. */
  .foot-nap a { padding-block: 6px }
}