/* ============================ ABOUT Nokú Travel Styles solo para la página About ============================ */ /* Variables locales para esta página (ideal: usar ) */ body.about-page { /* Usa la variable global si existe, o este valor por defecto */ --about-brand-dark: var(--noku-primary, #7f5539); --about-brand-medium: #b08968; --about-gray-900: var(--gray-900, #1a1a1a); --about-gray-700: var(--gray-700, #374151); --about-gray-600: var(--gray-600, #525252); --about-gray-300: var(--gray-300, #d1d5db); --about-white: var(--white, #fff); } /* Layout base para el contenido de About */ .main { padding-top: 64px; } /* 🚀 HERO CON IMAGEN (Overlay) */ .page-hero { position: relative; min-height: 340px; height: 55vh; max-height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: none; } /* Capa de imagen (fondo) */ .page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Capa de Overlay (oscurecimiento) */ .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65) ); z-index: 2; } /* Contenido (texto) */ .page-hero__content { position: relative; z-index: 3; max-width: 720px; padding: 0 1.5rem; } .page-hero h1, .page-hero h2 { margin: 0 0 0.5rem; color: #fff; } .page-hero .lead { margin: 0 auto; max-width: 600px; color: rgba(255, 255, 255, 0.95); } /* ===== FADE IN (Animación) ===== */ .fadein { opacity: 0; transform: translateY(12px); animation: fadeIn 1s ease-out forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* Secciones About */ .about-section { padding: clamp(2rem, 5vw, 3rem) 0; } .about-section h2 { margin: 0 0 1rem; color: var(--about-brand-dark); } .about-section p { max-width: 72ch; color: var(--about-gray-700); } /* Perfil de fundadores */ .profile { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: center; } .profile img { width: 160px; height: 160px; object-fit: cover; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); border: 3px solid rgba(255, 255, 255, 0.8); } .profile-info h3 { margin: 0 0 0.25rem; color: var(--about-brand-dark); font-weight: 700; } .profile-info p { margin: 0 0 0.5rem; color: var(--about-gray-600); } /* Lista de valores */ .about-section ul { list-style: none; padding: 0; margin: 0.5rem 0 0; } .about-section li { position: relative; padding-left: 1.75rem; margin: 0.5rem 0; color: var(--about-gray-700); } .about-section li::before { content: "•"; position: absolute; left: 0; top: 0.1rem; width: 1rem; height: 1rem; display: inline-grid; place-items: center; color: var(--about-brand-dark); font-weight: 700; } /* Botón dentro de las secciones */ .about-section .btn { margin-top: 0.75rem; } /* Estado activo en NAV para About */ .nav__link.is-active { color: var(--about-brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } /* Última sección centrada (CTA) */ .about-section:last-of-type .container { text-align: center; max-width: 720px; margin: 0 auto; } .about-section:last-of-type h2 { color: var(--about-brand-dark); margin-bottom: 0.5rem; } .about-section:last-of-type p { color: var(--about-gray-700); margin-bottom: 1rem; } .about-section:last-of-type .btn { display: inline-block; margin-top: 0.5rem; } /* Accesibilidad */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Responsivo */ @media (max-width: 820px) { .profile { grid-template-columns: 1fr; text-align: left; } .profile img { width: 132px; height: 132px; } } @media (max-width: 640px) { .page-hero { height: 50vh; min-height: 300px; } .page-hero__content { padding: 0 1.25rem; } } @media (max-width: 520px) { .page-hero { text-align: left; } .page-hero .lead { max-width: 42ch; } }