:root { --color-brand: #294c35; --color-brand-700: #183d29; --color-brand-800: #12311f; --color-brand-900: #0d2518; --color-sage-50: #f4f7f1; --color-sage-100: #e8efe4; --color-sage-200: #d8e4d4; --color-cream: #f6f0e4; --color-paper: #fffdf8; --color-white: #ffffff; --color-ink: #222a24; --color-muted: #626d65; --color-line: #dce3dc; --color-accent: #aa7b3f; --color-danger: #9d2e2e; --color-success: #2f6a45; --color-nav: #39443c; --color-copy: #505b53; --color-copy-soft: #465148; --color-surface-hero: #fbf8f1; --color-surface-senior: #fbf6ec; --color-surface-page: #fbf9f4; --color-image-placeholder: #d8e2d5; --color-light-text: #dce7df; --color-light-muted: #c5d2c8; --color-light-soft: #b9c8bc; --color-light-faint: #9fb0a2; --color-light-highlight: #edf5ed; --color-accent-soft: #d8b27b; --color-note-bg: #fff8ea; --color-input-border: #cfd8cf; --color-feature-border: #b8cdb6; --color-danger-border: #e8b7b7; --color-danger-bg: #fff1f1; --color-whatsapp: #1f7546; --overlay-header: rgba(255, 253, 248, 0.94); --overlay-header-line: rgba(220, 227, 220, 0.86); --overlay-focus: rgba(41, 76, 53, 0.22); --overlay-white-55: rgba(255, 255, 255, 0.55); --overlay-white-60: rgba(255, 255, 255, 0.60); --overlay-paper-91: rgba(255, 253, 248, 0.91); --overlay-brand-15: rgba(41, 76, 53, 0.15); --overlay-brand-35: rgba(41, 76, 53, 0.35); --overlay-white-72: rgba(255, 255, 255, 0.72); --overlay-line-70: rgba(220, 227, 220, 0.70); --overlay-white-12: rgba(255, 255, 255, 0.12); --overlay-white-16: rgba(255, 255, 255, 0.16); --shadow-whatsapp: 0 12px 28px rgba(0, 0, 0, 0.18); --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: Georgia, "Times New Roman", serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heading: 400; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-soft: 0 12px 36px rgba(20, 54, 34, 0.07); --shadow-card: 0 20px 54px rgba(20, 54, 34, 0.11); --max-width: 1180px; --header-height: 78px; --section-space: clamp(4rem, 7vw, 6.5rem); --motion-fast: 160ms; --motion-base: 360ms; --motion-slow: 720ms; --motion-image: 1100ms; --image-settle-scale: 1.065; --image-hover-scale: 1.025; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.2, .8, .2, 1.12); --transition: var(--motion-fast) var(--ease-out); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); } body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-paper); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { color: inherit; } address { font-style: normal; } main { overflow: clip; } ::selection { background: var(--color-sage-200); color: var(--color-brand-900); } .container { width: min(var(--max-width), calc(100% - 2.5rem)); margin-inline: auto; } .narrow { max-width: 780px; } .narrow-wide { max-width: 940px; } .center { text-align: center; } .section { padding-block: var(--section-space); } .section-soft { background: var(--color-cream); } .section-sage { background: var(--color-sage-100); } .section-dark { background: var(--color-brand-900); color: var(--color-white); } .skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; transform: translateY(-160%); background: var(--color-white); color: var(--color-brand-900); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 0.65rem 0.9rem; box-shadow: var(--shadow-soft); } .skip-link:focus { transform: translateY(0); } .site-header { position: sticky; top: 0; z-index: 80; background: var(--overlay-header); border-bottom: 1px solid var(--overlay-header-line); backdrop-filter: blur(14px); transition: box-shadow var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out); } .site-header.is-scrolled { background: rgba(255, 253, 248, 0.97); box-shadow: 0 10px 28px rgba(20, 54, 34, 0.07); } .nav-shell { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand img { width: 210px; height: auto; } .nav-actions { display: flex; align-items: center; gap: 1rem; } .primary-nav { display: flex; align-items: center; gap: 1.35rem; font-size: 0.94rem; font-weight: var(--weight-medium); } .primary-nav > a:not(.button) { position: relative; padding-block: 0.65rem; color: var(--color-nav); } .primary-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0.35rem; height: 1px; background: var(--color-brand); transition: right var(--transition); } .primary-nav > a:not(.button):hover::after, .primary-nav > a[aria-current="page"]::after { right: 0; } .primary-nav > a[aria-current="page"] { color: var(--color-brand-800); } .language-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); } .language-switch a { min-width: 36px; padding: 0.35rem 0.5rem; border-radius: var(--radius-pill); text-align: center; color: var(--color-muted); font-size: 0.75rem; font-weight: var(--weight-semibold); letter-spacing: 0.05em; } .language-switch a[aria-current="true"] { background: var(--color-brand); color: var(--color-white); } .menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; } .menu-toggle span { width: 19px; height: 1.5px; background: var(--color-brand-800); transition: transform var(--transition), opacity var(--transition); } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0.75rem 1.2rem; cursor: pointer; font-weight: var(--weight-semibold); line-height: 1.2; transition: transform var(--motion-base) var(--ease-spring), box-shadow var(--motion-base) var(--ease-out), background var(--transition), border-color var(--transition), color var(--transition); } .button::after { content: ""; position: absolute; z-index: -1; inset: -70% -35%; background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.24) 48%, transparent 62%); transform: translateX(-72%) rotate(3deg); transition: transform 680ms var(--ease-out); pointer-events: none; } .button:hover::after { transform: translateX(72%) rotate(3deg); } .button:active { transform: translateY(0) scale(.975); transition-duration: var(--motion-fast); } .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--overlay-focus); outline-offset: 3px; } .button-primary { background: var(--color-brand); color: var(--color-white); } .button-primary:hover { background: var(--color-brand-700); } .button-secondary { background: transparent; border-color: var(--color-brand); color: var(--color-brand-800); } .button-secondary:hover { background: var(--color-sage-100); } .button-light { background: var(--color-white); color: var(--color-brand-900); } .button-outline-light { border-color: var(--overlay-white-55); color: var(--color-white); background: transparent; } .button-ghost { border-color: var(--color-line); background: var(--color-white); color: var(--color-brand-800); } .button-small { min-height: 40px; padding: 0.58rem 1rem; font-size: 0.9rem; } .button-wide { width: 100%; } .button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } .button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .text-link { position: relative; width: fit-content; color: var(--color-brand); font-weight: var(--weight-semibold); font-size: 0.92rem; transition: color var(--transition), transform var(--transition); } .text-link:hover { color: var(--color-brand-700); transform: translateX(2px); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-brand); font-size: 0.74rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.13em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-accent); } .eyebrow-light { color: var(--color-light-highlight); } .eyebrow-light::before { background: var(--color-accent-soft); } h1, h2, h3, p { overflow-wrap: anywhere; } h1, h2 { font-family: var(--font-serif); color: var(--color-brand-800); font-weight: var(--weight-heading); letter-spacing: -0.022em; } h1 { margin: 0.8rem 0 1.25rem; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.07; } h2 { margin: 0.5rem 0 1rem; font-size: clamp(1.72rem, 2.5vw, 2.3rem); line-height: 1.14; } h3 { color: var(--color-brand-800); font-weight: var(--weight-semibold); line-height: 1.3; } .lead { max-width: 760px; margin: 0 0 1.8rem; color: var(--color-copy); font-size: clamp(1.05rem, 1.6vw, 1.2rem); } .lead-small { color: var(--color-muted); font-size: 1.05rem; } .small-text { font-size: 0.88rem; color: var(--color-muted); } .hero { padding-block: clamp(3.6rem, 7vw, 6.2rem); background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-surface-hero) 58%, var(--color-sage-100) 100%); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr); gap: clamp(2.6rem, 5vw, 5rem); align-items: center; } .hero-copy { max-width: 700px; } .hero-copy .button-row { margin-top: 1.6rem; } .hero-media { position: relative; margin: 0; min-height: 500px; border-radius: 32px; overflow: hidden; background: var(--color-image-placeholder); box-shadow: var(--shadow-card); } .hero-media picture, .hero-media img { width: 100%; height: 100%; } .hero-media img { position: absolute; inset: 0; object-fit: cover; } .media-note { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.15rem; padding: 0.95rem 1rem; border: 1px solid var(--overlay-white-60); border-radius: 16px; background: var(--overlay-paper-91); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); } .media-note strong { display: block; color: var(--color-brand-800); font-size: 0.95rem; font-weight: var(--weight-semibold); } .media-note span { display: block; margin-top: 0.2rem; color: var(--color-muted); font-size: 0.83rem; line-height: 1.5; } .section-hero .media-note { left: auto; right: 1.15rem; width: auto; max-width: min(330px, calc(100% - 2.3rem)); padding: 0.68rem 0.82rem; } .section-hero .media-note strong { font-size: clamp(0.98rem, 1.25vw, 1.08rem); line-height: 1.24; } .chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; } .chips span { padding: 0.48rem 0.72rem; border: 1px solid var(--overlay-brand-15); border-radius: var(--radius-pill); background: var(--overlay-white-72); color: var(--color-copy-soft); font-size: 0.82rem; font-weight: var(--weight-medium); } .senior-hero { background: linear-gradient(135deg, var(--color-sage-100), var(--color-surface-senior)); } .trust-strip { background: var(--color-white); border-block: 1px solid var(--color-line); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .trust-grid > div { padding: 1.3rem 1.45rem; border-right: 1px solid var(--color-line); } .trust-grid > div:last-child { border-right: 0; } .trust-grid strong { display: block; color: var(--color-brand-800); font-size: 0.92rem; font-weight: var(--weight-semibold); } .trust-grid span { display: block; margin-top: 0.2rem; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; } .section-heading { display: grid; grid-template-columns: minmax(0, .92fr) minmax(300px, .7fr); gap: 2.5rem; align-items: end; margin-bottom: 2.2rem; } .section-heading p { margin: 0; color: var(--color-muted); } .section-heading.compact { margin-bottom: 2rem; } .section-heading.single { grid-template-columns: 1fr; } .section-action { margin-top: 1.8rem; } .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .service-card { display: flex; flex-direction: column; min-height: 330px; padding: 1.45rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .service-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .service-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--color-sage-100); color: var(--color-brand); } .service-category { text-align: right; color: var(--color-muted); font-size: 0.72rem; font-weight: var(--weight-medium); } .service-card h3 { margin: 1rem 0 0.55rem; font-size: 1.2rem; } .service-card p { margin: 0; color: var(--color-muted); font-size: 0.92rem; } .service-meta { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.84rem; } .service-meta strong { color: var(--color-brand); font-weight: var(--weight-semibold); } .service-card .text-link { margin-top: 0.8rem; } .guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .guide-card { padding: 1.35rem; border-top: 1px solid var(--overlay-brand-35); transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .guide-card > span { color: var(--color-accent); font-size: 0.78rem; font-weight: var(--weight-semibold); letter-spacing: 0.08em; } .guide-card h3 { margin: 0.6rem 0 0.45rem; font-size: 1.05rem; } .guide-card p { margin: 0; color: var(--color-muted); font-size: 0.9rem; } .split-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .split-feature-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); } .feature-image { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-sage-100); } .feature-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--motion-slow) var(--ease-out); } .feature-image-small img { aspect-ratio: 1.15 / 1; } .senior-integral-image img { aspect-ratio: 0.92 / 1; object-position: 36% center; } .feature-copy { max-width: 650px; } .feature-copy p { color: var(--color-muted); } .light-copy h2, .light-copy h3 { color: var(--color-white); } .light-copy p { color: var(--color-light-text); } .check-list { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; } .check-list li { position: relative; padding-left: 1.6rem; margin: 0.65rem 0; } .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-brand); font-weight: var(--weight-bold); } .light-copy .check-list li::before { color: var(--color-accent-soft); } .compact-list { margin-block: 1rem; } .compact-list li { font-size: 0.9rem; } .info-card { margin-top: 1.5rem; padding: 1.35rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); } .info-card h3 { margin-top: 0; } .info-card p:last-child { margin-bottom: 0; } .health-note { padding: 0.9rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-note-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.88rem; } .contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: start; } .contact-card { padding: 1.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); } .contact-card dl { margin: 0; } .contact-card dl > div { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--color-line); } .contact-card dl > div:last-child { border-bottom: 0; } .contact-card dt { color: var(--color-muted); font-size: 0.82rem; font-weight: var(--weight-medium); } .contact-card dd { margin: 0; color: var(--color-brand-800); } .contact-card .button-row { margin-top: 1.2rem; } .faq-list { display: grid; gap: 0.7rem; } .faq-list details { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); padding: 1rem 1.15rem; transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); } .faq-list summary { cursor: pointer; color: var(--color-brand-800); font-weight: var(--weight-semibold); list-style: none; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; float: right; color: var(--color-brand); font-size: 1.2rem; font-weight: var(--weight-regular); transition: transform var(--motion-base) var(--ease-out); } .faq-list details[open] summary::after { content: "−"; transform: rotate(180deg); } .faq-list p { margin: 0.8rem 0 0; color: var(--color-muted); } .callout-section { padding-top: 0; } .callout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 3.2rem); border-radius: var(--radius-lg); background: var(--color-brand); color: var(--color-white); box-shadow: var(--shadow-card); } .callout h2 { margin: 0 0 0.6rem; color: var(--color-white); } .callout p { max-width: 720px; margin: 0; color: var(--color-light-text); } .callout-flat { padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .page-hero { padding-block: clamp(3.2rem, 6vw, 5.1rem); background: linear-gradient(135deg, var(--color-cream), var(--color-surface-page)); border-bottom: 1px solid var(--color-line); } .page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .58fr); gap: 3rem; align-items: center; } .page-hero h1 { max-width: 820px; font-size: clamp(2.2rem, 3.8vw, 3.15rem); } .page-hero-simple h1 { max-width: 860px; } .page-hero-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .page-hero-media img { width: 100%; aspect-ratio: 1.3 / 1; object-fit: cover; } .anchor-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; } .anchor-nav a { padding: 0.45rem 0.7rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-brand-800); font-size: 0.82rem; font-weight: var(--weight-medium); } .service-visual-section { padding-block: clamp(2.8rem, 5vw, 4.5rem); background: var(--color-paper); border-bottom: 1px solid var(--overlay-line-70); } .service-visual-heading { margin-bottom: 1.5rem; } .service-visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .service-visual-card { margin: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .service-visual-card picture { display: block; overflow: hidden; background: var(--color-sage-100); } .service-visual-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); } .service-visual-card:nth-child(1) img { object-position: center; } .service-visual-card:nth-child(2) img { object-position: center; } .service-visual-card:nth-child(3) img { object-position: center 42%; } .service-section { border-bottom: 1px solid var(--overlay-line-70); } .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .detail-grid-single { grid-template-columns: minmax(0, 760px); } .service-detail-card { display: flex; flex-direction: column; padding: 1.55rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .service-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .service-detail-card h3 { margin: 0; font-size: 1.25rem; } .service-detail-card p { color: var(--color-muted); } .service-short { margin-bottom: 0; color: var(--color-brand-800) !important; font-weight: var(--weight-medium); } .pill { display: inline-flex; width: max-content; padding: 0.3rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-sage-100); color: var(--color-brand); font-size: 0.74rem; font-weight: var(--weight-semibold); } .pill-strong { background: var(--color-brand); color: var(--color-white); } .price-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--color-line); } .price-row > span { display: inline-flex; align-items: baseline; gap: 0.4rem; } .price-row strong { color: var(--color-brand); font-size: 1.2rem; font-weight: var(--weight-semibold); } .price-row small { color: var(--color-muted); } .service-detail-card .button { align-self: flex-start; margin-top: 1rem; } .note-inline { padding: 0.7rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-sage-50); font-size: 0.84rem; } .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .plan-card { padding: 1.7rem; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-soft); } .plan-card-featured { border-color: var(--color-feature-border); box-shadow: var(--shadow-card); } .plan-card h3 { margin: 1rem 0 0.4rem; font-size: 1.35rem; } .plan-card > p { color: var(--color-muted); } .plan-price { margin: 1.3rem 0; color: var(--color-brand); font-family: var(--font-serif); font-size: 2.2rem; font-weight: var(--weight-medium); line-height: 1; } .plan-price span { font-family: var(--font-sans); color: var(--color-muted); font-size: 0.88rem; font-weight: var(--weight-regular); } .pack-price { color: var(--color-brand) !important; font-weight: var(--weight-semibold); } .prose section + section { margin-top: 2.2rem; } .prose h2 { font-size: 1.6rem; } .prose p { color: var(--color-muted); } .booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; } .booking-form { display: grid; gap: 1rem; } .booking-form fieldset { margin: 0; padding: 1.45rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-soft); } .booking-form legend { padding: 0 0.35rem; color: var(--color-brand-800); font-family: var(--font-serif); font-size: 1.25rem; font-weight: var(--weight-medium); } .field { display: grid; gap: 0.4rem; margin-top: 0.95rem; } .field:first-of-type { margin-top: 0.35rem; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .field label, .field-label { color: var(--color-brand-800); font-size: 0.86rem; font-weight: var(--weight-medium); } .field input, .field select, .field textarea, .booking-form select { width: 100%; border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); padding: 0.72rem 0.78rem; } .field textarea { resize: vertical; } .field small { color: var(--color-muted); font-size: 0.77rem; } .check-control { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; color: var(--color-ink); } .check-control input { margin-top: 0.25rem; accent-color: var(--color-brand); } .check-control a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; } .addon-box { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--color-sage-50); } .privacy-check { margin-top: 1rem; font-size: 0.88rem; } .slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; } .slot-button { min-height: 42px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-brand-800); cursor: pointer; font-weight: var(--weight-medium); } .slot-button:hover { border-color: var(--color-brand); } .slot-button[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-white); } .booking-summary { position: sticky; top: calc(var(--header-height) + 1rem); padding: 1.4rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-sage-50); } .booking-summary h2 { margin-top: 0; font-size: 1.5rem; } .booking-summary p { color: var(--color-muted); } .summary-lines { display: grid; gap: 0.65rem; } .summary-lines div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--color-line); } .summary-lines span { color: var(--color-muted); font-size: 0.86rem; } .summary-lines strong { text-align: right; color: var(--color-brand-800); font-weight: var(--weight-semibold); } .booking-success, .booking-disabled { grid-column: 1 / -1; max-width: 760px; margin-inline: auto; padding: 2rem; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-soft); } .booking-success h2, .booking-disabled h2 { margin-top: 0.75rem; } .booking-success dl { margin: 1.4rem 0; } .booking-success dl > div { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--color-line); } .booking-success dt { color: var(--color-muted); font-size: 0.84rem; } .booking-success dd { margin: 0; } .success-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-sage-100); color: var(--color-success); font-size: 1.3rem; font-weight: var(--weight-bold); } .form-alert { padding: 0.8rem 1rem; border: 1px solid var(--color-danger-border); border-radius: var(--radius-sm); background: var(--color-danger-bg); color: var(--color-danger); } .honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-footer { padding: 3.4rem 0 1.6rem; background: var(--color-brand-900); color: var(--color-light-text); } .footer-grid { display: grid; grid-template-columns: 1.25fr .85fr .85fr .75fr; gap: 2.5rem; } .footer-brand img { width: min(280px, 100%); height: auto; margin-bottom: 1rem; } .footer-brand p { max-width: 380px; } .footer-tourist-note { color: var(--color-light-soft); font-size: 0.88rem; } .footer-grid h2 { margin: 0 0 0.8rem; color: var(--color-white); font-family: var(--font-sans); font-size: 0.86rem; font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; } .footer-grid p, .footer-grid address { color: var(--color-light-muted); font-size: 0.9rem; } .footer-grid a:hover { color: var(--color-white); } .footer-bottom { display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--overlay-white-12); color: var(--color-light-faint); font-size: 0.78rem; } .footer-bottom span:last-child { max-width: 720px; } .sticky-whatsapp a { position: fixed; z-index: 90; right: 2.5rem; bottom: 3.5rem; width: 56px; height: 56px; border-radius: 999px; background: radial-gradient(120% 120% at 30% 20%, #55f894 0%, #2add6d 48%, #1dc45e 78%), linear-gradient(180deg, #32da76 0%, #14b553 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(16,94,69,.35), 0 4px 8px rgba(0,0,0,.12); transition: transform .18s ease, box-shadow .25s ease, background .2s ease, outline-color .2s ease; cursor: pointer; outline: 3px solid transparent; outline-offset: 2px; overflow: visible; } .sticky-whatsapp a:hover, .sticky-whatsapp a:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px rgba(16,94,69,.42), 0 6px 14px rgba(0,0,0,.14); background: radial-gradient(120% 120% at 30% 20%, #66ffa0 0%, #2be06f 48%, #18bb53 78%), linear-gradient(180deg, #30de78 0%, #10b04e 100%); outline-color: rgba(18,140,126,.35); } .sticky-whatsapp a:active { transform: scale(.96); } .sticky-whatsapp a::before, .sticky-whatsapp a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: .22rem solid rgba(37,211,102,.55); transform: translate(-50%,-50%) scale(1); opacity: .45; z-index: -1; pointer-events: none; animation: whatsapp-fab-pulse 2.8s ease-out infinite; } .sticky-whatsapp a::after { animation-delay: 1.4s; } .sticky-whatsapp .whatsapp-phone-icon { width: 26px; height: 26px; display: block; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)) drop-shadow(0 2px 6px rgba(0,0,0,.08)); } @keyframes whatsapp-fab-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .45; } 70% { opacity: .08; } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } } .consent-banner { position: fixed; z-index: 120; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1040px; margin-inline: auto; padding: 1rem 1.1rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-card); } .consent-banner[hidden] { display: none; } .consent-banner p { margin: 0.2rem 0 0; color: var(--color-muted); font-size: 0.86rem; } .consent-actions { display: flex; gap: 0.55rem; flex: 0 0 auto; } @media (max-width: 1040px) { .service-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); } .service-visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid > div:nth-child(2) { border-right: 0; } .trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-line); } .footer-grid { grid-template-columns: 1.25fr 1fr 1fr; } .footer-grid > div:last-child { grid-column: 2 / -1; } } @media (max-width: 900px) { :root { --header-height: 70px; } .container { width: min(var(--max-width), calc(100% - 2rem)); } .brand img { width: 178px; } .menu-toggle { display: flex; } .primary-nav { position: absolute; top: calc(100% + 0.5rem); left: 1rem; right: 1rem; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 0.65rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-card); } .primary-nav.is-open { display: flex; } .primary-nav > a:not(.button) { padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); } .primary-nav > a:not(.button)::after { display: none; } .primary-nav > a[aria-current="page"] { background: var(--color-sage-100); } .primary-nav .button { margin-top: 0.4rem; } .hero-grid, .split-feature, .split-feature-reverse, .page-hero-grid, .contact-layout { grid-template-columns: 1fr; } .service-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-media { min-height: 430px; } .page-hero-media { max-width: 720px; } .feature-image-small img { aspect-ratio: 121 / 88; object-position: center; } .section-heading { grid-template-columns: 1fr; gap: 0.8rem; align-items: start; } .detail-grid, .plan-grid { grid-template-columns: 1fr; } .booking-layout { grid-template-columns: 1fr; } .booking-summary { position: static; order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:last-child { grid-column: auto; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 620px) { .container { width: min(100% - 1.35rem, var(--max-width)); } .brand img { width: 150px; } .nav-actions { gap: 0.5rem; } .language-switch a { min-width: 32px; padding-inline: 0.4rem; } h1 { font-size: clamp(2rem, 9vw, 2.6rem); } h2 { font-size: clamp(1.62rem, 7vw, 2.05rem); } .hero { padding-block: 3rem; } .hero-media { min-height: 350px; border-radius: 22px; } .media-note { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; } .section-hero .media-note { left: auto; right: 0.75rem; width: auto; max-width: min(285px, calc(100% - 1.5rem)); } .service-visual-grid { grid-template-columns: 1fr; } .senior-integral-image img { aspect-ratio: 4 / 3; object-position: center; } .service-grid, .guide-grid, .trust-grid, .field-grid, .footer-grid { grid-template-columns: 1fr; } .trust-grid > div { border-right: 0; border-bottom: 1px solid var(--color-line); } .trust-grid > div:last-child { border-bottom: 0; } .service-card { min-height: auto; } .contact-card dl > div, .booking-success dl > div { grid-template-columns: 1fr; gap: 0.2rem; } .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .callout { align-items: flex-start; flex-direction: column; } .footer-brand { grid-column: auto; } .footer-bottom { display: block; } .footer-bottom span { display: block; } .footer-bottom span + span { margin-top: 0.6rem; } .consent-banner { align-items: stretch; flex-direction: column; } .consent-actions { flex-wrap: wrap; } .consent-actions .button { flex: 1; } } @media (max-width: 720px) { .sticky-whatsapp a { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } } .motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0) scale(.992); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .motion-ready [data-reveal="left"] { transform: translate3d(-24px, 0, 0); } .motion-ready [data-reveal="right"] { transform: translate3d(24px, 0, 0); } .motion-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } .motion-ready [data-image-motion] img { transform: scale(var(--image-settle-scale)); transition: transform var(--motion-image) var(--ease-out); will-change: transform; } .motion-ready [data-image-motion].is-image-visible img { transform: scale(1); will-change: auto; } @media (hover: hover) and (pointer: fine) { .button:hover { transform: translateY(-2px) scale(1.008); box-shadow: 0 10px 24px rgba(20,54,34,.12); } .service-card:hover, .service-detail-card:hover, .service-visual-card:hover { transform: translateY(-5px); border-color: var(--color-feature-border); box-shadow: var(--shadow-card); } .guide-card:hover { transform: translateY(-3px); border-color: var(--color-brand); } .motion-ready [data-image-motion].is-image-visible:hover img { transform: scale(var(--image-hover-scale)); } .faq-list details:hover { transform: translateY(-1px); border-color: var(--color-feature-border); box-shadow: var(--shadow-soft); } .brand img { transition: transform var(--motion-base) var(--ease-spring); } .brand:hover img { transform: scale(1.018); } } @media (max-width: 900px) { .primary-nav.is-open .mobile-menu-primary > a, .primary-nav.is-open .mobile-menu-meta { animation: menu-item-in 460ms var(--ease-out) both; } .primary-nav.is-open .mobile-menu-primary > a:nth-child(2) { animation-delay: 45ms; } .primary-nav.is-open .mobile-menu-primary > a:nth-child(3) { animation-delay: 90ms; } .primary-nav.is-open .mobile-menu-primary > a:nth-child(4) { animation-delay: 135ms; } .primary-nav.is-open .mobile-menu-meta { animation-delay: 180ms; } } @keyframes menu-item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; } .motion-ready [data-image-motion] img { transform: none !important; } } [hidden] { display: none !important; } .ritual-preferences { margin-top: 1rem; padding: 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-cream); } .ritual-preferences h3 { margin: 0; font-size: 1rem; } .ritual-preferences > p { margin: .35rem 0 0; } .footer-link-button { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; } .footer-link-button:hover, .footer-link-button:focus-visible { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; } .mobile-menu-meta { display: none; } .mobile-menu-primary { display: contents; } .footer-phone { display: inline-block; color: var(--color-white); font-family: var(--font-serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; } .footer-bottom { align-items: flex-start; } .footer-bottom-meta { display: grid; gap: 0.35rem; max-width: 680px; } .footer-legal-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.75rem; } .footer-legal-links a, .footer-legal-links button { color: var(--color-light-muted); } .footer-legal-links a:hover, .footer-legal-links a:focus-visible, .footer-legal-links button:hover, .footer-legal-links button:focus-visible { color: var(--color-white); } .footer-claims-link { text-decoration: underline; text-underline-offset: 3px; } body.menu-open { overflow: hidden; } .legal-page .legal-provider-card, .claims-provider-card { margin: 1.4rem 0 2rem; padding: 1.15rem 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-sage-50); } .claims-form { display: grid; gap: 1.25rem; } .claims-form fieldset { margin: 0; padding: 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); } .claims-form legend { padding: 0 0.45rem; color: var(--color-brand-900); font-family: var(--font-serif); font-size: 1.35rem; } .claims-notice { padding: 1rem 1.1rem; border-left: 3px solid var(--color-accent); background: var(--color-note-bg); color: var(--color-copy); } .claims-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05em; } @media (max-width: 900px) { .site-header { z-index: 200; } .nav-shell { position: relative; } .brand, .nav-actions > .language-switch, .menu-toggle { position: relative; z-index: 230; } .menu-toggle { border-color: var(--overlay-brand-15); box-shadow: 0 8px 24px rgba(20,54,34,.06); } .primary-nav { position: fixed; z-index: 220; inset: 0; top: 0; display: flex; visibility: hidden; opacity: 0; pointer-events: none; overflow-y: auto; overscroll-behavior: contain; align-items: stretch; flex-direction: column; justify-content: space-between; gap: 2rem; padding: calc(var(--header-height) + 2rem) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); border: 0; border-radius: 0; background: linear-gradient(145deg, var(--color-paper) 0%, var(--color-sage-50) 58%, var(--color-cream) 100%); box-shadow: none; transform: translateY(-12px); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms step-end; } .primary-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease, visibility 0s; } .mobile-menu-primary { display: grid; gap: 0.15rem; width: min(100%, 620px); margin-inline: auto; } .primary-nav .mobile-menu-primary > a:not(.button) { display: block; padding: 0.4rem 0; border-radius: 0; color: var(--color-brand-900); background: transparent; font-family: var(--font-serif); font-size: clamp(2.25rem, 10vw, 4.35rem); font-weight: var(--weight-heading); line-height: 1.03; letter-spacing: -0.045em; } .primary-nav .mobile-menu-primary > a:not(.button)[aria-current="page"] { color: var(--color-accent); background: transparent; } .primary-nav .mobile-menu-primary > a:not(.button)::after { display: none; } .nav-book-button { width: fit-content; min-width: 190px; margin-top: 1rem; min-height: 50px; padding-inline: 1.4rem; } .mobile-menu-meta { display: grid; width: min(100%, 620px); margin-inline: auto; gap: 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--color-line); } .mobile-menu-contact, .mobile-menu-legal { display: grid; gap: 0.55rem; } .mobile-menu-kicker { color: var(--color-muted); font-size: 0.68rem; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; } .mobile-menu-phone { width: fit-content; color: var(--color-brand-900); font-family: var(--font-serif); font-size: clamp(1.55rem, 7vw, 2.15rem); line-height: 1.1; } .mobile-menu-actions, .mobile-menu-legal > div { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .mobile-menu-actions a { color: var(--color-brand-700); font-weight: var(--weight-semibold); } .mobile-menu-legal a { color: var(--color-muted); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px; } .footer-bottom { gap: 1rem; } .footer-legal-links { justify-content: flex-start; } } @media (max-width: 620px) { .primary-nav { padding-top: calc(var(--header-height) + 1.6rem); } .nav-book-button { width: 100%; } .footer-phone { font-size: 1.55rem; } .footer-legal-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; margin-top: 1.25rem; } .claims-form fieldset { padding: 1rem; } } .hp-field { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .claims-form .field-grid { gap: 1rem 1.1rem; } .claims-form .field-grid > label { display: grid; gap: .42rem; min-width: 0; align-content: start; color: var(--color-ink); font-size: .9rem; font-weight: var(--weight-medium); } .claims-form .field-grid > label.wide { grid-column: 1 / -1; } .claims-form .field-grid > label > span { line-height: 1.35; } .claims-form input, .claims-form select, .claims-form textarea { width: 100%; min-height: 48px; border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); padding: .76rem .86rem; box-shadow: 0 1px 0 rgba(13,37,24,.02); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .claims-form textarea { min-height: 128px; resize: vertical; line-height: 1.5; } .claims-form select { appearance: none; padding-right: 2.6rem; background-image: linear-gradient(45deg,transparent 50%,var(--color-brand) 50%),linear-gradient(135deg,var(--color-brand) 50%,transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px; background-size: 6px 6px,6px 6px; background-repeat: no-repeat; } .claims-form input:hover, .claims-form select:hover, .claims-form textarea:hover { border-color: var(--color-feature-border); } .claims-form input:focus, .claims-form select:focus, .claims-form textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--overlay-focus); } .claims-form input::placeholder, .claims-form textarea::placeholder { color: #8b948d; } .claims-form .consent-check { display: flex; align-items: flex-start; gap: .72rem; padding: .9rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-sage-50); font-size: .88rem; color: var(--color-copy); } .claims-form .consent-check input { width: 18px; height: 18px; min-height: 0; margin-top: .14rem; accent-color: var(--color-brand); flex: 0 0 auto; } @media (max-width: 720px) { .claims-form .field-grid { grid-template-columns: 1fr; } .claims-form .field-grid > label.wide { grid-column: auto; } .claims-form fieldset { padding: 1rem; } .claims-form legend { font-size: 1.18rem; } } .footer-bottom { align-items: center; } .footer-bottom-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.55rem; max-width: none; } .footer-bottom-meta > span, .footer-bottom-meta > a { line-height: 1.45; } .footer-bottom-separator { color: var(--color-light-faint); } .footer-bottom-meta .footer-claims-link { color: var(--color-light-muted); } .footer-bottom-meta .footer-claims-link:hover, .footer-bottom-meta .footer-claims-link:focus-visible { color: var(--color-white); } .footer-bottom-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem 1.15rem; margin-left: auto; } .footer-credit { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--color-light-faint); white-space: nowrap; } .footer-credit > a { display: inline-flex; align-items: center; gap: 0.18rem; color: var(--color-accent-soft); font-weight: var(--weight-medium); text-decoration: none; text-underline-offset: 3px; } .footer-credit > a:hover, .footer-credit > a:focus-visible { color: var(--color-white); text-decoration: underline; } .footer-external-icon { width: 0.78rem; height: 0.78rem; flex: 0 0 auto; overflow: visible; transform: translateY(-0.03em); } @media (max-width: 900px) { .footer-bottom-actions { width: 100%; justify-content: flex-start; margin-left: 0; } } @media (max-width: 620px) { .footer-bottom-meta { display: flex; gap: 0.35rem 0.5rem; } .footer-bottom-meta > span { display: inline; } .footer-bottom-actions { display: grid; gap: 0.9rem; margin-top: 1rem; } .footer-legal-links { margin-top: 0; } .footer-credit { display: inline-flex; width: fit-content; margin-top: 0; } .footer-credit > span, .footer-credit > a > span { display: inline; } }