/* Páginas interiores: azul costero, arena y fotografía real del hostal. */ .inner-hero {
    position:relative;
    isolation:isolate;
    background:var(--navy);
    color:var(--white);
    min-height:435px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.inner-hero-photo {
    position:absolute;
    inset:0 0 0 auto;
    width:65%;
    z-index:-1;
}
.inner-hero-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 48%;
}
.inner-hero-photo::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0b2b43,rgba(11,43,67,.45) 35%,rgba(11,43,67,.04) 80%),linear-gradient(0deg,rgba(5,24,39,.25),transparent 45%);
}
.inner-hero-content {
    padding-block:62px;
    pointer-events:none;
}
.inner-hero-copy {
    width:54%;
    max-width:650px;
    pointer-events:auto;
}
.inner-hero .eyebrow {
    color:var(--sand);
    display:flex;
    align-items:center;
    gap:12px;
    font-size:10px;
}
.inner-hero .eyebrow::before {
    content:'';
    width:25px;
    height:1px;
    background:var(--sand);
}
.inner-hero h1 {
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(44px,4.6vw,66px);
    line-height:1.12;
    letter-spacing:-.025em;
    margin:0 0 22px;
}
.inner-hero h1 em {
    font-weight:500;
    color:#e3eef5;
}
.inner-hero-copy>p {
    font-size:15px;
    color:#d1e0eb;
    line-height:1.85;
    max-width:42ch;
    margin:0;
}
.inner-hero-link {
    display:inline-flex;
    align-items:center;
    gap:22px;
    padding:11px 0 5px;
    margin-top:22px;
    border-bottom:1px solid #8299a8;
    color:#efdbb9;
    font-size:12px;
    font-weight:500;
    text-decoration:none;
    min-height:44px;
}
.inner-photo-caption {
    position:absolute;
    z-index:1;
    width:fit-content;
    max-width:calc(100% - 44px);
    padding:6px 9px;
    border-radius:3px;
    background:rgba(8,31,50,.7);
    right:32px;
    bottom:22px;
    font-size:10px;
    color:white;
    letter-spacing:.04em;
    text-shadow:none;
}
.story-facts {
    background:#173e5a;
    border-top:1px solid #36576f;
    color:white;
}
.story-facts dl {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding-block:28px;
}
.story-facts dl>div {
    padding-inline:34px;
    border-left:1px solid #537087;
}
.story-facts dl>div:first-child {
    padding-left:0;
    border:0;
}
.story-facts dt {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:#c2d8e7;
    margin-bottom:7px;
}
.story-facts dd {
    font-family:var(--serif);
    font-size:34px;
    line-height:1.3;
    color:#e4cda8;
    margin:0;
}
.story-facts dd span {
    display:block;
    font-family:var(--sans);
    font-size:11px;
    color:#d5e2eb;
    line-height:1.6;
    margin-top:4px;
}
.story-origins {
    background:#f3ede2;
}
.origins-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:92px;
    align-items:center;
}
.origins-album {
    position:relative;
    padding:12px 60px 110px 0;
}
.archive-photo {
    background:#fffdfa;
    margin:0;
    padding:12px 12px 0;
    border-radius:4px;
    transform:rotate(-2deg);
    box-shadow:0 10px 32px #614d2e1a;
}
.archive-photo .photo-button {
    border-radius:1px;
}
.archive-photo img {
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}
.archive-photo figcaption {
    padding:15px 3px 17px;
    font-size:10px;
    color:#716b5e;
    line-height:1.6;
}
.album-color-photo {
    position:absolute;
    right:0;
    bottom:0;
    width:190px;
    margin:0;
    border:8px solid var(--white);
    background:var(--white);
    border-radius:4px;
    box-shadow:0 12px 28px #122f451f;
    transform:rotate(3deg);
}
.album-color-photo img {
    display:block;
    width:100%;
    height:190px;
    object-fit:cover;
    object-position:44% center;
}
.album-color-photo figcaption {
    font-size:9px;
    padding:10px 3px 3px;
    color:#607181;
    line-height:1.5;
}
.origins-copy .section-title {
    color:var(--navy);
    font-size:clamp(34px,3.6vw,49px);
}
.origins-copy .copy {
    font-size:15px;
    margin:22px 0;
    color:#5b6265;
}
.origins-copy strong {
    font-weight:600;
    color:#214459;
}
.story-note {
    display:flex;
    align-items:flex-start;
    gap:14px;
    border-top:1px solid #d7cbb5;
    padding-top:23px;
    margin-top:26px;
}
.story-note>i {
    font-size:27px;
    color:#8b6b3e;
}
.story-note p {
    margin:0;
    max-width:38ch;
    font-size:13px;
    line-height:1.8;
    color:#725f45;
}
.story-generation {
    background:#0b2b43;
    color:white;
}
.generation-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:110px;
    align-items:center;
}
.generation-copy .eyebrow {
    color:var(--sand);
}
.generation-copy .section-title {
    font-size:clamp(34px,3.5vw,48px);
    line-height:1.2;
}
.generation-copy .section-title em {
    font-weight:500;
    color:#c9e1ef;
}
.generation-copy .copy {
    font-size:15px;
    color:#c4d7e4;
    margin:24px 0;
}
.generation-signature {
    border-left:2px solid var(--sand);
    padding-left:18px;
    margin:30px 0 24px;
}
.generation-signature strong {
    display:block;
    font-family:var(--serif);
    font-weight:500;
    font-size:24px;
    line-height:1.3;
    color:#f4e5cd;
}
.generation-signature span {
    display:block;
    font-size:11px;
    color:#bdcedc;
    margin-top:7px;
}
.generation-copy .text-link {
    color:#f3e2c6;
    border-color:#849aa9;
}
.generation-portrait {
    margin:0;
    position:relative;
    border:1px solid #42647d;
    border-radius:8px;
    overflow:hidden;
    background:#f3ede2;
}
.generation-portrait .photo-button {
    border-radius:0;
}
.generation-portrait img {
    display:block;
    width:100%;
    height:530px;
    object-fit:cover;
    object-position:center 42%;
}
.generation-portrait figcaption {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:17px 22px;
    color:#173e5a;
    font-size:12px;
    font-weight:500;
}
.story-services {
    background:#fffdfa;
}
.story-services .section-heading>.copy,.story-spaces .section-heading>.copy {
    max-width:33ch;
    margin:0;
    font-size:14px;
}
.story-service-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}
.story-service-panel {
    position:relative;
    overflow:hidden;
    background:#eaf2f7;
    border-radius:9px;
    padding:36px;
    border:1px solid #d3e2ed;
}
.service-panel-sand {
    background:#f4ecdd;
    border-color:#e8dac1;
}
.story-service-panel .eyebrow {
    font-size:10px;
    margin-top:24px;
    margin-bottom:10px;
}
.service-symbol {
    display:flex;
    width:52px;
    height:52px;
    justify-content:center;
    align-items:center;
    color:var(--white);
    background:var(--brand);
    border-radius:9px;
    font-size:28px;
}
.service-panel-sand .service-symbol {
    background:#a17d4d;
}
.story-service-panel h3 {
    font-family:var(--serif);
    font-size:29px;
    font-weight:500;
    line-height:1.25;
    color:#123b59;
    margin:0 0 22px;
}
.story-service-panel ul {
    padding:0 0 0 18px;
    margin:0 0 22px;
    font-size:13px;
    color:#506679;
    line-height:1.85;
}
.story-service-panel li {
    padding-left:5px;
    margin-bottom:10px;
    list-style:disc;
}
.story-service-panel li::marker {
    color:#698eaa;
}
.service-panel-sand li::marker {
    color:#a17d4d;
}
.story-spaces {
    background:#eaf2f7;
}
.story-photo-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    grid-template-rows:225px 225px;
    gap:20px;
}
.story-photo-grid figure {
    margin:0;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
    border-radius:8px;
    background:#fffdfa;
}
.story-photo-grid figure:nth-child(-n+2) {
    grid-row:span 2;
}
.story-photo-grid .photo-button {
    border-radius:0;
    flex:1;
    min-height:0;
}
.story-photo-grid img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.story-photo-grid figcaption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    font-size:11px;
    color:#21445c;
}
.story-photo-grid figcaption i {
    font-size:16px;
    flex-shrink:0;
    color:#6c8ca4;
}
.story-location {
    background:#f3ede2;
}
.story-location-grid {
    display:grid;
    grid-template-columns:1fr 1.35fr;
    border-radius:10px;
    overflow:hidden;
    background:#d3e2eb;
}
.story-address {
    padding:42px;
    background:#123b59;
    color:white;
}
.story-address .eyebrow {
    color:var(--sand);
    font-size:9px;
}
.story-address .section-title {
    font-size:42px;
}
.story-address>p {
    font-size:14px;
    color:#c9dce8;
    margin:22px 0;
    line-height:1.8;
}
.story-address address {
    position:relative;
    font-style:normal;
    padding-left:29px;
    margin:26px 0;
    font-size:13px;
    color:#ebf2f7;
    line-height:1.9;
}
.story-address address i {
    position:absolute;
    left:0;
    top:2px;
    font-size:23px;
    color:var(--sand);
}
.story-location iframe {
    width:100%;
    height:100%;
    min-height:440px;
    border:0;
}
.family-section .copy {
    color:#c2d3df;
}
.destination-gallery {
    background:#eaf2f7;
}
.explore-page .destination-card {
    border:1px solid #d2e1ec;
    box-shadow:0 7px 22px #153e5909;
}
.destination-stays {
    background:#123b59;
    border-color:#36576f;
}
.destination-stays>.max-w-7xl>.text-center h2 {
    color:white;
}
.destination-stays>.max-w-7xl>.text-center .text-brand-600 {
    color:#e6ceaa;
}
.destination-stays>.max-w-7xl>.text-center .text-gray-600 {
    color:#c9dce8;
}
.destination-stays .text-center>a {
    background:var(--sand);
    color:#173e5a;
}
.contact-page .contact-map {
    background:#eaf2f7;
    padding-block:56px;
}
.contact-page .contact-map-frame {
    height:430px;
    border-width:0;
    border-radius:10px;
    box-shadow:0 12px 35px #153e5914;
}
.contact-details {
    background:#f3ede2;
}
.contact-page .contact-card {
    background:#123b59;
    border-color:#214d6d;
}
.contact-card .text-ocean-950 {
    color:white;
}
.contact-card .text-gray-400,.contact-card .text-gray-600,.contact-card .text-gray-700 {
    color:#c9dce8;
}
.contact-card .text-brand-600 {
    color:#e6ceaa;
}
.contact-card a.text-emerald-600 {
    color:#b9e6d0;
}
.contact-card .bg-brand-50 {
    background:#284f6b;
}
.contact-card a[class*="w-11"] {
    background:#284f6b;
    color:white;
}
.contact-page .contact-directions {
    background:#eaf2f7;
    border-color:#d5e2ec;
}
.contact-page .contact-form-card {
    border:1px solid #e1d3be;
    border-top:4px solid var(--brand);
    box-shadow:0 8px 25px #614d2e09;
}
.contact-page .contact-form-card input,.contact-page .contact-form-card textarea {
    background:#fcfdfe;
}
.room-page .room-intro {
    background:linear-gradient(110deg,#0b2b43,#1a4c6e);
    color:white;
    border-bottom:3px solid var(--sand);
}
.room-intro .copy {
    color:#c9dce8;
}
.room-intro .breadcrumbs,.room-intro .breadcrumbs a {
    color:#e0c9a4;
}
.room-page .booking-panel {
    border-color:#c5d8e6;
    border-top:4px solid #1a4c6e;
    background:#edf4f8;
}
.room-page .booking-panel dd {
    color:#163e5b;
}
.room-page .detail-features {
    padding:24px;
    background:#eaf2f7;
    border-radius:8px;
    border-left:2px solid #a6c5da;
}
@media(min-width:1440px) {
    .inner-hero {
        min-height:465px;
    }
}
@media(max-width:1100px) {
    .origins-grid,.generation-grid {
        gap:54px;
    }
    .inner-hero-copy {
        width:58%;
    }
    .inner-hero h1 {
        font-size:52px;
    }
    .origins-album {
        padding-right:45px;
    }
    .album-color-photo {
        width:170px;
    }
    .album-color-photo img {
        height:170px;
    }
    .story-service-panel {
        padding:30px;
    }
    .story-address {
        padding:34px;
    }
}
@media(max-width:900px) {
    .inner-hero-copy {
        width:64%;
    }
    .inner-hero h1 {
        font-size:48px;
    }
    .inner-hero-copy>p {
        font-size:14px;
        max-width:34ch;
    }
    .origins-grid {
        gap:36px;
    }
    .origins-album {
        padding-right:24px;
        padding-bottom:90px;
    }
    .album-color-photo {
        width:145px;
        border-width:6px;
    }
    .album-color-photo img {
        height:150px;
    }
    .archive-photo {
        padding:8px 8px 0;
    }
    .archive-photo figcaption {
        font-size:9px;
        padding:12px 3px;
    }
    .generation-grid {
        gap:42px;
    }
    .generation-portrait img {
        height:480px;
    }
    .generation-copy .section-title {
        font-size:34px;
    }
    .story-service-panel h3 {
        font-size:26px;
    }
    .story-photo-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:280px 280px;
    }
    .story-photo-grid figure:nth-child(-n+2) {
        grid-row:auto;
    }
    .story-location-grid {
        grid-template-columns:1fr 1.2fr;
    }
    .story-address {
        padding:30px;
    }
    .story-address .section-title {
        font-size:36px;
    }
}
@media(max-width:740px) {
    .inner-hero {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        min-height:0;
    }
    .inner-hero-content {
        order:0;
        padding-block:40px;
    }
    .inner-hero-copy {
        width:100%;
        max-width:520px;
    }
    .inner-hero h1 {
        font-size:46px;
        line-height:1.13;
    }
    .inner-hero-copy>p {
        max-width:44ch;
    }
    .inner-hero-photo {
        position:relative;
        order:1;
        inset:auto;
        width:100%;
        height:230px;
        z-index:auto;
    }
    .inner-hero-photo::after {
        background:linear-gradient(0deg,#071f3166,transparent 55%);
    }
    .inner-photo-caption {
        left:22px;
        right:22px;
        bottom:17px;
        font-size:9px;
    }
    .inner-hero-link {
        margin-top:14px;
    }
    .story-facts dl {
        padding-block:24px;
    }
    .story-facts dl>div {
        padding-inline:22px;
    }
    .story-facts dd {
        font-size:28px;
    }
    .story-facts dt {
        font-size:9px;
    }
    .story-facts dd span {
        font-size:10px;
    }
    .origins-grid,.generation-grid {
        grid-template-columns:1fr;
        gap:34px;
    }
    .origins-copy {
        grid-row:1;
    }
    .origins-album {
        max-width:560px;
        width:100%;
        margin-inline:auto;
        padding-right:70px;
        padding-bottom:80px;
    }
    .album-color-photo {
        width:180px;
    }
    .album-color-photo img {
        height:180px;
    }
    .generation-portrait {
        max-width:480px;
        width:100%;
        margin-inline:auto;
    }
    .generation-portrait img {
        height:auto;
        aspect-ratio:4/5;
        object-position:center 35%;
    }
    .story-service-grid {
        grid-template-columns:1fr;
    }
    .story-location-grid {
        grid-template-columns:1fr;
    }
    .story-location iframe {
        height:360px;
        min-height:0;
    }
    .story-address .section-title br {
        display:none;
    }
    .story-services .section-heading>.copy,.story-spaces .section-heading>.copy {
        margin-top:20px;
        max-width:46ch;
    }
}
@media(max-width:640px) {
    .inner-hero-content {
        padding-block:36px;
    }
    .inner-hero h1 {
        font-size:40px;
        margin-bottom:20px;
    }
    .inner-hero .eyebrow {
        font-size:9px;
        letter-spacing:.12em;
    }
    .inner-hero-copy>p {
        font-size:14px;
    }
    .inner-hero-photo {
        height:210px;
    }
    .story-facts dl {
        padding-block:22px;
    }
    .story-facts dl>div {
        padding-inline:14px;
    }
    .story-facts dt {
        font-size:9px;
        letter-spacing:.06em;
        line-height:1.6;
        min-height:26px;
    }
    .story-facts dd {
        font-size:25px;
    }
    .story-facts dd span {
        font-size:9px;
        max-width:13ch;
    }
    .origins-copy .section-title {
        font-size:36px;
    }
    .origins-copy .copy {
        font-size:14px;
    }
    .origins-album {
        padding:0 45px 74px 0;
    }
    .archive-photo {
        transform:rotate(-1deg);
    }
    .album-color-photo {
        width:145px;
    }
    .album-color-photo img {
        height:150px;
    }
    .album-color-photo figcaption {
        font-size:8px;
    }
    .generation-copy .section-title {
        font-size:35px;
    }
    .generation-copy .copy {
        font-size:14px;
    }
    .generation-signature strong {
        font-size:23px;
    }
    .generation-portrait img {
        aspect-ratio:4/5;
    }
    .generation-portrait figcaption {
        font-size:11px;
        padding:15px 18px;
    }
    .story-service-panel {
        padding:28px;
    }
    .story-service-panel h3 {
        font-size:29px;
    }
    .story-service-panel ul {
        font-size:13px;
    }
    .story-photo-grid {
        gap:14px;
        grid-template-rows:230px 230px;
    }
    .story-photo-grid figcaption {
        font-size:10px;
        line-height:1.5;
        padding:12px;
    }
    .story-photo-grid figcaption i {
        display:none;
    }
    .story-address {
        padding:30px;
    }
    .story-address .section-title {
        font-size:34px;
    }
    .story-location iframe {
        height:320px;
    }
    .contact-page .contact-map {
        padding-block:36px;
    }
    .contact-page .contact-map-frame {
        height:360px;
    }
    .room-page .detail-features {
        padding:20px;
    }
}
@media(max-width:370px) {
    .inner-hero h1 {
        font-size:35px;
    }
    .inner-hero .eyebrow {
        font-size:8px;
    }
    .story-facts dl>div {
        padding-inline:10px;
    }
    .story-facts dd {
        font-size:23px;
    }
    .story-facts dd span {
        font-size:10px;
    }
    .story-facts dt {
        font-size:9px;
    }
    .origins-copy .section-title {
        font-size:33px;
    }
    .generation-copy .section-title {
        font-size:31px;
    }
    .origins-album {
        padding-right:35px;
    }
    .album-color-photo {
        width:122px;
    }
    .album-color-photo img {
        height:128px;
    }
    .story-photo-grid {
        grid-template-rows:190px 190px;
    }
    .story-photo-grid figcaption {
        font-size:9px;
        padding:10px;
    }
    .story-service-panel {
        padding:24px;
    }
}