@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Jost:wght@400;500;600&display=swap'); :root{ --navy: #294258; --navy-deep: #1b2b39; --bone: #f2ead9; --card: #eae1cd; --ink: #2a2620; --ink-soft: #5c5548; --rust: #a8562e; --rust-deep: #7a3d22; --verde: #4a5738; --line: rgba(42,38,32,0.14); --deep-green: #1d2b25; --gold: #d4a017; --warm-grey: #9a9787; } *{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body{ margin: 0; background: var(--bone); color: var(--ink); font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } a{ color: inherit; } a:focus-visible, button:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; } img{ max-width: 100%; display: block; } .eyebrow{ font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; } h1, h2, h3{ font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif; font-weight: 600; margin: 0; text-wrap: balance; } .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } /* ---- bilingual toggle (body-scoped so itself never matches [data-lang]) ---- */ body [data-lang]{ display: none; } body [data-lang="es"]{ display: inline; } body [data-lang="es"].block{ display: block; } html[data-lang="en"] [data-lang="es"]{ display: none; } html[data-lang="en"] [data-lang="en"]{ display: inline; } html[data-lang="en"] [data-lang="en"].block{ display: block; } /* ================= SITE NAV ================= */ .site-nav{ position: sticky; top: 0; z-index: 40; background: var(--bone); border-bottom: 1px solid var(--line); } .site-nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(20px, 4vw, 56px); } .nav-brand-group{ display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .nav-back{ display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ink-soft); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; opacity: 0.8; transition: opacity 0.2s ease, color 0.2s ease; } .nav-back:hover{ opacity: 1; color: var(--rust-deep); } .nav-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; } .nav-brand svg{ width: 22px; height: auto; color: var(--rust-deep); } .nav-brand span{ font-family: 'EB Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0.06em; font-size: 1rem; text-transform: uppercase; white-space: nowrap; } .nav-links{ display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; } .nav-links a{ text-decoration: none; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); padding: 4px 2px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); border-color: var(--rust); } .nav-right{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 11px 22px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .btn-rust{ background: var(--rust); color: var(--bone); } .btn-rust:hover{ background: var(--rust-deep); } .btn-outline{ background: transparent; color: var(--ink); border-color: var(--line); } .btn-outline:hover{ border-color: var(--rust); color: var(--rust-deep); } .btn-light{ background: var(--bone); color: var(--ink); } .btn-light:hover{ background: #fff; } .nav-toggle{ display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--ink); } .nav-toggle svg{ width: 24px; height: 24px; } @media (max-width: 880px){ .nav-links{ display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bone); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px clamp(20px, 4vw, 56px) 20px; } .nav-links.is-open{ display: flex; } .nav-links a{ padding: 10px 0; width: 100%; } .nav-toggle{ display: inline-flex; } .site-nav-inner{ position: relative; } .nav-reserve{ display: none; } .nav-links .nav-reserve-mobile{ display: block; margin-top: 8px; } } .nav-reserve-mobile{ display: none; } /* ================= LANG TOGGLE (reused, inline w/ nav-right) ================= */ .lang-toggle{ display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .lang-toggle button{ font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 600; padding: 6px 12px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; } .lang-toggle button[aria-pressed="true"]{ background: var(--ink); color: var(--bone); } /* ================= PAGE HERO (interior pages) ================= */ .page-hero{ position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); color: var(--bone); } .page-hero img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero-tint{ position: absolute; inset: 0; background: var(--navy); mix-blend-mode: multiply; opacity: 0.4; } .page-hero-scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,31,0.15) 0%, rgba(15,23,31,0.75) 100%); } .page-hero-content{ position: relative; z-index: 1; width: 100%; padding: clamp(48px, 8vw, 80px) 0 clamp(28px, 4vw, 40px); } .page-hero .eyebrow{ color: rgba(242,234,217,0.82); margin-bottom: 10px; } .page-hero h1{ font-size: clamp(2.1rem, 4.6vw, 3.1rem); } /* ================= SECTIONS / TYPE ================= */ .section{ padding: clamp(56px, 8vw, 96px) 0; } .section-head{ max-width: 640px; margin: 0 0 clamp(28px, 4vw, 44px); } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .section-head .eyebrow{ color: var(--rust-deep); margin-bottom: 10px; } .section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); } .lede{ font-size: 1.05rem; color: var(--ink-soft); max-width: 62ch; } /* ================= NOSOTROS (about) ================= */ .about-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .about-grid img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; } .about-copy p{ color: var(--ink-soft); margin: 0 0 16px; } .about-copy p:last-child{ margin-bottom: 0; } .about-strip{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(40px, 6vw, 64px); } .about-strip img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; } @media (max-width: 780px){ .about-grid{ grid-template-columns: 1fr; } .about-strip{ grid-template-columns: repeat(3, 1fr); } } /* ================= HABITACIONES (rooms gallery) ================= */ .room-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); } .room-card{ background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 12px 26px -20px rgba(42,38,32,0.45); } .room-card-img{ aspect-ratio: 4 / 3; overflow: hidden; } .room-card-img img{ width: 100%; height: 100%; object-fit: cover; } .room-card-img.is-placeholder{ display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--paper, #f4f1ea), var(--paper, #f4f1ea) 10px, var(--line) 10px, var(--line) 11px); } .room-card-img.is-placeholder .placeholder-note{ font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); padding: 8px 14px; border-radius: 3px; } .room-card-body{ padding: 16px 18px 20px; } .room-card-body .tag{ font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust-deep); font-weight: 600; } .room-card-body p{ margin: 6px 0 0; font-size: 0.92rem; color: var(--ink-soft); } @media (max-width: 900px){ .room-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .room-grid{ grid-template-columns: 1fr; } } /* ================= REVIEWS ================= */ .reviews-section{ background: var(--card); } .reviews-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); } .review-card{ background: var(--bone); border: 1px solid var(--line); border-radius: 4px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; } .review-stars{ display: flex; gap: 3px; } .review-stars svg{ width: 15px; height: 15px; } .review-stars svg.is-on{ color: var(--rust-deep); } .review-stars svg.is-off{ color: var(--line); } .review-quote{ font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ink); margin: 0; flex-grow: 1; } .review-translated{ margin: -6px 0 0; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--ink-soft); opacity: 0.7; font-style: italic; } .review-meta{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.78rem; } .review-name{ font-weight: 600; } .review-location{ color: var(--ink-soft); display: block; font-size: 0.74rem; font-weight: 400; } .review-source{ text-decoration: none; color: var(--ink-soft); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .review-source:hover{ color: var(--rust-deep); text-decoration: underline; } .reviews-stat{ margin-top: clamp(20px, 3vw, 32px); font-size: 0.8rem; color: var(--ink-soft); } .reviews-stat a{ color: var(--ink-soft); text-decoration: underline; } @media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 620px){ .reviews-grid{ grid-template-columns: 1fr; } } /* ================= SERVICIOS ================= */ .services-section{ background: var(--deep-green); color: var(--bone); padding: clamp(56px, 9vw, 96px) 0; } .services-section .section-head h2{ color: var(--bone); } .services-section .section-head .eyebrow{ color: var(--gold); } .services-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 5vw, 56px); } .service-item{ text-align: center; } .service-item svg{ width: 46px; height: 46px; margin: 0 auto 16px; } .service-item .label{ font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: rgba(242,234,217,0.85); } .services-list{ list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; } .services-list li{ font-size: 0.92rem; color: rgba(242,234,217,0.85); padding-left: 20px; position: relative; } .services-list li::before{ content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--gold); } @media (max-width: 900px){ .services-grid{ grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } } @media (max-width: 560px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } .services-list{ grid-template-columns: 1fr; } } /* ================= CONTACTO ================= */ .contact-grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); } .contact-card{ background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: clamp(28px, 4vw, 40px); } .contact-row{ display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .contact-row:last-child{ border-bottom: none; } .contact-row svg{ width: 20px; height: 20px; flex-shrink: 0; color: var(--rust-deep); margin-top: 2px; } .contact-row .label{ font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; } .contact-row .value{ font-size: 0.98rem; } .contact-row .value a{ text-decoration: none; } .contact-row .value a:hover{ text-decoration: underline; } .contact-whatsapp{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; background: var(--navy); color: var(--bone); border-radius: 4px; padding: clamp(28px, 4vw, 40px); } .contact-whatsapp p{ color: rgba(242,234,217,0.85); margin: 0; } .contact-map{ margin-top: clamp(32px, 4vw, 48px); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; } .contact-map iframe{ width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } } /* ================= CTA BAND ================= */ .cta-band{ background: var(--navy); color: var(--bone); padding: clamp(40px, 6vw, 60px) 0; text-align: center; } .cta-band h2{ color: var(--bone); font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 18px; } .cta-band-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ================= FOOTER ================= */ .band{ background: var(--navy); color: var(--bone); } .band-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px clamp(20px, 4vw, 56px); } .band-brand{ display: flex; align-items: center; gap: 12px; } .band-brand svg{ width: 14px; height: auto; color: rgba(244,241,232,0.6); } .band-brand span{ font-family: 'EB Garamond', Georgia, serif; font-weight: 500; letter-spacing: 0.13em; font-size: 1rem; } .band-addr{ font-size: 0.82rem; opacity: 0.85; } .band-links{ display: flex; gap: 22px; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; } .band-links a{ text-decoration: none; opacity: 0.9; } .band-links a:hover{ opacity: 1; text-decoration: underline; } @media (max-width: 720px){ .band-inner{ flex-direction: column; align-items: flex-start; } .about-grid{ grid-template-columns: 1fr; } }