@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); /* ========================================================================== DESIGN SYSTEM & VARIABLES ========================================================================== */ :root { /* Color Palette (Playful Organic & Refined Warmth) */ --bg-primary: #fdfbf7; /* Creamy warm white */ --bg-secondary: #f6efe2; /* Warm linen */ --text-dark: #232c28; /* Deep pine/charcoal for optimal contrast */ --text-muted: #53645c; /* Muted slate green */ /* Brand Accent Colors */ --color-coral: #e56a54; /* Playful terracota/coral */ --color-coral-hover: #cd543f; --color-coral-light: rgba(229, 106, 84, 0.1); --color-sage: #5f856c; /* Soft organic sage green */ --color-sage-light: #eef4f0; /* Sage light tint */ --color-amber: #f5af42; /* Sunshine amber */ --color-amber-light: #fef6e7; --color-sky: #7bb5cc; /* Playful sky blue */ --color-sky-light: #edf6f9; /* Decorative Blobs Gradients */ --gradient-coral-amber: linear-gradient(135deg, rgba(229, 106, 84, 0.1) 0%, rgba(245, 175, 66, 0.1) 100%); --gradient-sage-sky: linear-gradient(135deg, rgba(95, 133, 108, 0.1) 0%, rgba(123, 181, 204, 0.1) 100%); /* Typography Pairing */ --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Fluid Spacing (using clamp for perfect responsiveness) */ --space-xs: clamp(0.5rem, 1vw, 0.75rem); --space-sm: clamp(0.875rem, 1.5vw, 1.25rem); --space-md: clamp(1.5rem, 3vw, 2.25rem); --space-lg: clamp(2.5rem, 5vw, 4rem); --space-xl: clamp(4rem, 8vw, 7rem); /* Border Radii (Whimsical organic styling) */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 32px; --radius-organic-1: 60% 40% 60% 40% / 40% 60% 40% 60%; --radius-organic-2: 40% 60% 40% 60% / 60% 40% 60% 40%; --radius-card: 32px 16px 32px 16px; /* Shadows (Deep, smooth premium shadows) */ --shadow-sm: 0 4px 6px -1px rgba(35, 44, 40, 0.05), 0 2px 4px -1px rgba(35, 44, 40, 0.03); --shadow-md: 0 10px 15px -3px rgba(35, 44, 40, 0.08), 0 4px 6px -2px rgba(35, 44, 40, 0.04); --shadow-lg: 0 20px 25px -5px rgba(35, 44, 40, 0.1), 0 10px 10px -5px rgba(35, 44, 40, 0.04); --shadow-inset: inset 0 2px 4px 0 rgba(35, 44, 40, 0.03); /* Layout */ --container-width: 1280px; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ========================================================================== ALTERNATE THEMES (for client presentation) Apply by adding data-theme="brisa|dulce|paraiso" to ========================================================================== */ /* --- Theme 2: Brisa Costera (Coastal Breeze) --- */ [data-theme="brisa"] { --bg-primary: #f4f8fb; --bg-secondary: #e8f1f8; --text-dark: #1a2a3a; --text-muted: #5a7a8a; --color-coral: #3a9bc7; --color-coral-hover: #2a7fa8; --color-coral-light: rgba(58, 155, 199, 0.1); --color-sage: #6db89a; --color-sage-light: #eaf5f0; --color-amber: #f0c87a; --color-amber-light: #fef7e8; --color-sky: #b8cbd8; --color-sky-light: #f0f4f8; --gradient-coral-amber: linear-gradient(135deg, rgba(58, 155, 199, 0.1) 0%, rgba(240, 200, 122, 0.1) 100%); --gradient-sage-sky: linear-gradient(135deg, rgba(109, 184, 154, 0.1) 0%, rgba(184, 203, 216, 0.1) 100%); } /* --- Theme 3: Dulce Infantil (Sweet Dreams) --- */ [data-theme="dulce"] { --bg-primary: #fdfaff; --bg-secondary: #f7f2fa; --text-dark: #2d2533; --text-muted: #7a6b82; --color-coral: #e887a8; --color-coral-hover: #d46a8e; --color-coral-light: rgba(232, 135, 168, 0.1); --color-sage: #a8d8c8; --color-sage-light: #eef8f4; --color-amber: #f0d5e8; --color-amber-light: #fdf5fa; --color-sky: #b8a8d8; --color-sky-light: #f3eef9; --gradient-coral-amber: linear-gradient(135deg, rgba(232, 135, 168, 0.1) 0%, rgba(240, 213, 232, 0.1) 100%); --gradient-sage-sky: linear-gradient(135deg, rgba(168, 216, 200, 0.1) 0%, rgba(184, 168, 216, 0.1) 100%); } /* --- Theme 4: Paraíso Natural (Natural Paradise) --- */ [data-theme="paraiso"] { --bg-primary: #faf8f5; --bg-secondary: #efeae2; --text-dark: #1e2820; --text-muted: #5a6650; --color-coral: #4a7c59; --color-coral-hover: #3a6648; --color-coral-light: rgba(74, 124, 89, 0.1); --color-sage: #c48a5a; --color-sage-light: #f6ede4; --color-amber: #d4b06a; --color-amber-light: #f8f2e6; --color-sky: #8a9a7a; --color-sky-light: #edf0e8; --gradient-coral-amber: linear-gradient(135deg, rgba(74, 124, 89, 0.1) 0%, rgba(212, 176, 106, 0.1) 100%); --gradient-sage-sky: linear-gradient(135deg, rgba(196, 138, 90, 0.1) 0%, rgba(138, 154, 122, 0.1) 100%); } /* ========================================================================== RESET & BASE STYLES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 60px; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; min-height: 100%; min-height: 100dvh; font-size: 16px; } @media (max-width: 480px) { html { font-size: 15px; scroll-padding-top: 55px; } } @media (max-width: 360px) { html { font-size: 14px; } } body { font-family: var(--font-body); background-color: var(--bg-primary); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; width: 100%; min-height: 100dvh; min-height: 100vh; word-wrap: break-word; overflow-wrap: break-word; -webkit-overflow-scrolling: touch; } body.no-scroll { overflow: hidden; position: fixed; width: 100%; height: 100%; height: 100dvh; touch-action: none; -webkit-overflow-scrolling: none; } img { max-width: 100%; height: auto; display: block; } svg { max-width: 100%; height: auto; display: block; } button, input, textarea, select { font: inherit; color: inherit; border: none; background: none; } button { cursor: pointer; } a { text-decoration: none; color: inherit; } @media (max-width: 480px) { body { line-height: 1.5; } } /* Mejora de tablas y elementos anchos en mobile */ table, pre, code, blockquote { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Espaciado vertical responsivo */ h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote { max-width: 100%; } @media (max-width: 480px) { h1 { letter-spacing: -0.03em; } } /* Selection highlight */ ::selection { background-color: rgba(229, 106, 84, 0.2); color: var(--text-dark); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-secondary); border-radius: 10px; border: 2px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { background: var(--color-sage); } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); font-weight: 800; color: var(--text-dark); } h2 { font-size: clamp(2rem, 3.5vw + 0.5rem, 3rem); color: var(--text-dark); } h3 { font-size: clamp(1.35rem, 2vw + 0.2rem, 1.85rem); } p { font-size: clamp(1rem, 0.2vw + 0.9rem, 1.125rem); color: var(--text-muted); } .text-gradient { background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-amber) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================== LAYOUT UTILITIES ========================================================================== */ .container { width: 92%; max-width: var(--container-width); margin: 0 auto; position: relative; z-index: 2; } @media (max-width: 480px) { .container { width: 94%; } } @media (max-width: 360px) { .container { width: 96%; } } .section-padding { padding: var(--space-lg) 0; } @media (max-width: 480px) { .section-padding { padding: var(--space-md) 0; } } .grid-2 { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; } } /* ========================================================================== DECORATIVE ELEMENTS & ANIMS ========================================================================== */ .blobs-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .blob { position: absolute; pointer-events: none; filter: blur(20px); opacity: 0.6; will-change: transform; animation: float-slow 12s infinite alternate ease-in-out; } .blob.paused { animation-play-state: paused; } .blob-1 { width: 400px; height: 400px; background: var(--gradient-coral-amber); border-radius: var(--radius-organic-1); top: -100px; right: -100px; } .blob-2 { width: 500px; height: 500px; background: var(--gradient-sage-sky); border-radius: var(--radius-organic-2); top: 50%; left: -200px; animation-delay: -3s; } .blob-3 { width: 350px; height: 350px; background: var(--gradient-coral-amber); border-radius: var(--radius-organic-1); bottom: 0; right: -50px; animation-delay: -6s; } @keyframes float-slow { 0% { transform: translate(0, 0); } 50% { transform: translate(15px, -25px); } 100% { transform: translate(-10px, 15px); } } .float-item { will-change: transform; animation: float-micro 6s infinite alternate ease-in-out; } @keyframes float-micro { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(-12px) rotate(3deg); } } .scroll-reveal { opacity: 0; transform: translateY(30px); will-change: opacity, transform; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.25rem; border-radius: 50px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; transition: var(--transition-bounce); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; z-index: 1; gap: 0.5rem; } .btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.15); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; z-index: -1; } .btn:hover::after { transform: scaleX(1); transform-origin: left; } .btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(-1px); } .btn-primary { background-color: var(--color-coral); color: white; } .btn-primary:hover { background-color: var(--color-coral-hover); } .btn-secondary { background-color: var(--color-sage); color: white; } .btn-secondary:hover { background-color: #4a6a54; } .btn-outline { background-color: transparent; color: var(--color-sage); border: 2px solid var(--color-sage); box-shadow: none; } .btn-outline:hover { background-color: var(--color-sage); color: white; } /* ========================================================================== NAVIGATION HEADER ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 1rem 0; background-color: rgba(253, 251, 247, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease; } .site-header:not(.scrolled) { background-color: transparent; backdrop-filter: none; } .site-header.scrolled { box-shadow: var(--shadow-sm); padding: 0.65rem 0; } @media (max-width: 480px) { .site-header { padding: 0.75rem 0; } .site-header.scrolled { padding: 0.5rem 0; } } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text-dark); flex-shrink: 1; min-width: 0; } .logo .logo-subtitle { font-size: 0.7rem; font-weight: 500; color: var(--color-coral); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .logo { font-size: 1.15rem; } .logo .logo-subtitle { display: none; } } .logo-heart { color: var(--color-coral); display: inline-block; font-size: 1.8rem; animation: heartbeat 2s infinite ease-in-out; } @keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 70% { transform: scale(1); } } .nav-menu { display: none; list-style: none; gap: 1rem; align-items: center; } @media (min-width: 992px) { .nav-menu { gap: 2rem; } } .nav-link { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.85rem, 1vw, 1rem); color: var(--text-dark); transition: var(--transition-smooth); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-coral); transition: var(--transition-smooth); } .nav-link:hover { color: var(--color-coral); } .nav-link:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 1rem; } .nav-actions .btn-sm { padding: 0.7rem 1.5rem; font-size: 0.95rem; display: none; } @media (min-width: 768px) { .nav-actions .btn-sm { display: inline-flex; } } .menu-toggle { display: flex; flex-direction: column; gap: 6px; width: 30px; z-index: 101; } .menu-toggle span { display: block; width: 100%; height: 3px; background-color: var(--text-dark); border-radius: 3px; transition: var(--transition-smooth); } /* Mobile Nav Active States */ .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .nav-mobile-overlay { position: fixed; top: 0; right: -100%; width: 85%; max-width: 400px; height: 100vh; height: 100dvh; background-color: var(--bg-primary); z-index: 99; box-shadow: var(--shadow-lg); padding: 7rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 2.5rem; transition: var(--transition-smooth); } @media (max-width: 480px) { .nav-mobile-overlay { width: 100%; max-width: 100%; padding: 6rem 1.5rem 2rem; } } .nav-mobile-overlay.active { right: 0; } .nav-mobile-menu { list-style: none; display: flex; flex-direction: column; gap: 1.75rem; } .nav-mobile-link { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text-dark); } @media (min-width: 768px) { .menu-toggle { display: none; } .nav-menu { display: flex; } } /* ========================================================================== HERO SECTION ========================================================================== */ .hero { position: relative; padding-top: clamp(5rem, 10vh, 8rem); padding-bottom: var(--space-lg); background-color: var(--bg-primary); } .hero-content { max-width: 620px; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 50px; background-color: var(--color-amber-light); color: #c97f18; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; margin-bottom: 1.5rem; border: 1px solid rgba(245, 175, 66, 0.25); letter-spacing: 0.05em; text-transform: uppercase; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-amber); animation: pulse 1.5s infinite alternate ease-in-out; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 1; } } .hero-title { margin-bottom: 1.5rem; position: relative; } .hero-description { margin-bottom: 2.5rem; font-size: 1.2rem; } .hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-graphic { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; } .hero-illustration { width: 100%; max-width: 480px; height: auto; border-radius: 40px 100px 50px 80px / 60px 50px 85px 50px; box-shadow: var(--shadow-lg); border: 10px solid white; position: relative; z-index: 2; overflow: hidden; } /* Custom CSS representation of illustration in case no image */ .hero-svg-fallback { width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 30% 20%, #fefcf3 0%, #f6efe2 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .hero-card-floating { position: absolute; background-color: white; padding: 1rem; border-radius: 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.75rem; z-index: 3; } .hero-card-1 { top: 10%; left: 5%; animation: float-micro 5s infinite alternate ease-in-out; } .hero-card-2 { bottom: 15%; right: 5%; animation: float-micro 7s infinite alternate ease-in-out -2s; } .avatar-group { display: flex; } .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; margin-left: -8px; background-color: var(--color-sky); } .avatar:first-child { margin-left: 0; background-color: var(--color-coral); } .avatar:last-child { background-color: var(--color-sage); } .hero-card-text h4 { font-size: 0.95rem; margin-bottom: 0.1rem; } .hero-card-text p { font-size: 0.8rem; } .icon-badge { width: 42px; height: 42px; border-radius: 50%; background-color: var(--color-sage-light); color: var(--color-sage); display: flex; align-items: center; justify-content: center; font-weight: bold; } /* ========================================================================== ABOUT US MODULE ========================================================================== */ .about-cards-container { display: grid; gap: 1.5rem; } .about-card { background-color: var(--bg-primary); padding: 1.75rem; border-radius: 20px; transition: var(--transition-bounce); border: 1px solid rgba(83, 100, 92, 0.03); } .about-card:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); } .about-card-coral { border-left: 5px solid var(--color-coral); } .about-card-sage { border-left: 5px solid var(--color-sage); } .objectives-box { background-color: var(--bg-secondary); padding: 3rem 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); height: 100%; } /* ========================================================================== BENEFITS / PILLARS SECTION ========================================================================== */ .section-title-wrapper { text-align: center; max-width: 680px; margin: 0 auto 4rem; } .section-subtitle { color: var(--color-coral); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; margin-bottom: 0.75rem; display: block; } .section-title { margin-bottom: 1rem; } .benefits-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } } .benefit-card { background-color: white; border-radius: var(--radius-card); padding: 2.5rem 2rem; box-shadow: var(--shadow-sm); transition: var(--transition-bounce); border: 1px solid rgba(83, 100, 92, 0.05); position: relative; overflow: hidden; } .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background-color: transparent; transition: var(--transition-smooth); } .benefit-card-coral::before { background-color: var(--color-coral); } .benefit-card-sage::before { background-color: var(--color-sage); } .benefit-card-amber::before { background-color: var(--color-amber); } .benefit-card-sky::before { background-color: var(--color-sky); } .benefit-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .benefit-icon-container { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.75rem; } .benefit-icon-coral { background-color: var(--color-coral-light); color: var(--color-coral); } .benefit-icon-sage { background-color: var(--color-sage-light); color: var(--color-sage); } .benefit-icon-amber { background-color: var(--color-amber-light); color: var(--color-amber); } .benefit-icon-sky { background-color: var(--color-sky-light); color: var(--color-sky); } .benefit-card h3 { margin-bottom: 0.85rem; font-size: 1.35rem; } .benefit-card p { font-size: 0.95rem; line-height: 1.5; } /* ========================================================================== SERVICES / PROGRAMS SECTION ========================================================================== */ .programs { background-color: var(--bg-secondary); position: relative; overflow: hidden; } .programs-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .programs-grid { grid-template-columns: repeat(4, 1fr); } } .program-card { background-color: white; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid rgba(83, 100, 92, 0.03); transition: var(--transition-bounce); display: flex; flex-direction: column; } .program-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .program-img-container { position: relative; height: 200px; overflow: hidden; background-color: var(--color-sage-light); } .program-img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .program-card:hover .program-img { transform: scale(1.08); } .program-tag { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.4rem 1.15rem; border-radius: 50px; background-color: white; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--text-dark); box-shadow: var(--shadow-sm); } .program-content { padding: 2.25rem 2rem; display: flex; flex-direction: column; flex-grow: 1; } .program-card h3 { margin-bottom: 0.85rem; font-size: 1.5rem; } .program-card p { font-size: 0.95rem; margin-bottom: 1.75rem; flex-grow: 1; } .program-footer { border-top: 1px solid rgba(83, 100, 92, 0.08); padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; } .program-link { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-coral); display: inline-flex; align-items: center; gap: 0.35rem; transition: var(--transition-smooth); } .program-link:hover { color: var(--color-coral-hover); gap: 0.6rem; } /* ========================================================================== PHILOSOPHY & DETAILS SECTION (USED ALSO FOR SERVICE AREA) ========================================================================== */ .philosophy-media { position: relative; } .philosophy-media-wrapper { position: relative; padding: 1.5rem; } .philosophy-img { width: 100%; max-width: 500px; height: auto; border-radius: 60px 40px 80px 40px / 50px 70px 40px 60px; border: 12px solid white; box-shadow: var(--shadow-lg); position: relative; z-index: 2; } .philosophy-badge { position: absolute; bottom: 0; left: 0; background-color: var(--color-amber); color: var(--text-dark); padding: 1.5rem; border-radius: 30px; box-shadow: var(--shadow-lg); z-index: 3; max-width: 200px; text-align: center; font-family: var(--font-display); transform: rotate(-5deg); animation: float-micro 5s infinite alternate ease-in-out; } .philosophy-badge h4 { font-size: 2.25rem; font-weight: 800; } .philosophy-badge p { font-weight: 700; font-size: 0.9rem; color: var(--text-dark); } .philosophy-list { list-style: none; margin: 2rem 0; display: grid; gap: 1rem; } .philosophy-item { display: flex; gap: 1rem; align-items: flex-start; } .philosophy-checkmark { width: 24px; height: 24px; border-radius: 50%; background-color: rgba(95, 133, 108, 0.15); color: var(--color-sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold; } .philosophy-item-text h4 { font-size: 1.125rem; margin-bottom: 0.15rem; } .philosophy-item-text p { font-size: 0.95rem; } /* ========================================================================== PRICING GRID ========================================================================== */ .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center; max-width: 1080px; margin: 0 auto; align-items: stretch; } @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== POLICIES GRID ========================================================================== */ .policies-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 960px; margin: 0 auto; } @media (min-width: 768px) { .policies-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== TESTIMONIALS SECTION ========================================================================== */ .testimonials { position: relative; } .testimonials-slider-container { max-width: 860px; margin: 0 auto; position: relative; overflow: hidden; padding: 1rem; } .testimonials-slider { display: flex; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; } .testimonial-slide { min-width: 100%; padding: 0 1rem; box-sizing: border-box; } .testimonial-card { background-color: white; border-radius: 40px; padding: 3rem 2rem; box-shadow: var(--shadow-md); border: 1px solid rgba(83, 100, 92, 0.05); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } @media (min-width: 768px) { .testimonial-card { padding: 4rem 3.5rem; } } .quote-icon { font-size: 4rem; line-height: 1; font-family: Georgia, serif; color: rgba(229, 106, 84, 0.15); position: absolute; top: 1.5rem; left: 2.5rem; } .testimonial-rating { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; color: var(--color-amber); } .testimonial-text { font-size: clamp(1.1rem, 0.4vw + 1rem, 1.45rem); font-family: var(--font-display); font-weight: 600; line-height: 1.5; color: var(--text-dark); margin-bottom: 2rem; position: relative; z-index: 2; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-sage-light); } .testimonial-author-info h4 { font-size: 1.15rem; margin-bottom: 0.15rem; text-align: left; } .testimonial-author-info p { font-size: 0.85rem; text-align: left; } .slider-controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; } .slider-btn { width: 52px; height: 52px; border-radius: 50%; background-color: white; color: var(--text-dark); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; transition: var(--transition-bounce); border: 1px solid rgba(83, 100, 92, 0.05); } .slider-btn:hover { background-color: var(--color-coral); color: white; transform: scale(1.08); } .slider-dots { display: flex; gap: 0.6rem; } .slider-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(83, 100, 92, 0.2); transition: var(--transition-smooth); } .slider-dot.active { background-color: var(--color-coral); width: 28px; border-radius: 10px; } /* ========================================================================== BOOKING & VISIT FORM ========================================================================== */ .booking { background-color: var(--bg-secondary); position: relative; overflow: hidden; } .booking-wrapper { background-color: white; border-radius: 40px; box-shadow: var(--shadow-lg); padding: 3rem 2rem; border: 1px solid rgba(83, 100, 92, 0.05); position: relative; overflow: hidden; } @media (min-width: 992px) { .booking-wrapper { padding: 4.5rem; } } .booking-header { text-align: center; max-width: 580px; margin: 0 auto 3rem; } .booking-form { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .booking-form { grid-template-columns: repeat(2, 1fr); } .form-full-width { grid-column: span 2; } } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-dark); } .form-control { width: 100%; padding: 0.95rem 1.25rem; border-radius: 16px; background-color: #fcfcfb; border: 2px solid rgba(83, 100, 92, 0.08); color: var(--text-dark); font-family: var(--font-body); transition: var(--transition-smooth); } .form-control:focus { outline: none; border-color: var(--color-sage); background-color: white; box-shadow: 0 0 0 4px rgba(95, 133, 108, 0.1); } select.form-control { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232c28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 18px; } textarea.form-control { resize: vertical; min-height: 120px; } .form-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; } .form-checkbox-label input { margin-top: 0.2rem; } .booking-form .btn { width: 100%; margin-top: 1rem; } .form-message { padding: 1rem; border-radius: 12px; font-weight: 600; font-size: 0.95rem; display: none; animation: fadeIn 0.4s ease forwards; } .form-message.success { background-color: rgba(95, 133, 108, 0.12); color: var(--color-sage); border: 1px solid rgba(95, 133, 108, 0.2); } .form-message.error { background-color: rgba(229, 106, 84, 0.12); color: var(--color-coral); border: 1px solid rgba(229, 106, 84, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background-color: var(--text-dark); color: white; padding: 5rem 0 2.5rem; position: relative; overflow: hidden; } .footer-top { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 768px) { .footer-top { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .footer-top { grid-template-columns: 2fr 1fr 1fr 1.5fr; } } .footer-brand .logo { color: white; margin-bottom: 1.25rem; } .footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; margin-bottom: 2rem; max-width: 320px; } .social-links { display: flex; gap: 1rem; } .social-link { width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.06); color: white; display: flex; align-items: center; justify-content: center; transition: var(--transition-bounce); } .social-link:hover { background-color: var(--color-coral); color: white; transform: translateY(-4px); } .footer-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 1.5rem; color: white; } .footer-links { list-style: none; display: grid; gap: 0.85rem; } .footer-link a { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; transition: var(--transition-smooth); } .footer-link a:hover { color: var(--color-coral); padding-left: 4px; } .footer-contact-info { display: grid; gap: 1rem; color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; } .footer-contact-item { display: flex; gap: 0.75rem; align-items: flex-start; } .footer-contact-item svg { color: var(--color-coral); flex-shrink: 0; margin-top: 0.2rem; } .footer-bottom { padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); } @media (min-width: 768px) { .footer-bottom { flex-direction: row; } } .footer-legal-links { display: flex; gap: 1.5rem; } .footer-legal-links a:hover { color: white; } /* ========================================================================== PRICING CARD & POLICY CARD SPECIFICS ========================================================================== */ .pricing-card { display: flex; flex-direction: column; height: 100%; } .pricing-card-featured { border: 2px solid var(--color-sage); transform: scale(1.03); box-shadow: var(--shadow-lg); } @media (max-width: 768px) { .pricing-card-featured { transform: scale(1); margin: 1rem 0; } } .policy-card { background-color: white; padding: 2rem; border-radius: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(83, 100, 92, 0.05); transition: var(--transition-bounce); } .policy-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .policy-card h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.75rem; font-weight: 700; } .policy-card p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); } .policy-card-full { grid-column: 1 / -1; } /* FAQ Section */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { display: none; content: ''; } .faq-item[open] summary span:last-child { transform: rotate(180deg); }