/* ========================================================================= MARTA ANDRADE REFLEXOLOGÍA — HOJA DE ESTILOS Concepto: "La pausa como ritual" Orden: Variables > Reset > Global > Utilidades > Layout > Componentes > Módulos de página > Estados interactivos > Media queries > Preferencias de movimiento reducido ========================================================================= */ /* ========================================= 1. VARIABLES ========================================= */ :root { /* Paleta de marca — no modificar valores */ --azul-principal: #3B5570; --celeste: #A8C4DE; --celeste-claro: #B8D4E8; --crema: #F2ECE0; --beige: #D4C4A8; --arena: #C9A876; --terracota: #C1785A; /* Derivados de uso funcional */ --azul-oscuro: #2A3E52; --texto-principal: var(--azul-oscuro); --texto-suave: #5C7288; --superficie: #FFFFFF; --superficie-alterna: var(--celeste-claro); --borde-suave: rgba(59, 85, 112, 0.16); --sombra-suave: 0 18px 40px rgba(59, 85, 112, 0.12); /* Tipografía */ --font-display: 'Vogue', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-titulos: 'Classic Vogue', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Escala tipográfica */ --paso-xs: 0.875rem; --paso-sm: 1rem; --paso-base: 1.125rem; --paso-md: 1.375rem; --paso-lg: 1.875rem; --paso-xl: 2.75rem; --paso-2xl: 3.75rem; --paso-3xl: 5rem; /* Espaciado */ --espacio-xs: 0.5rem; --espacio-sm: 1rem; --espacio-md: 1.5rem; --espacio-lg: 2.5rem; --espacio-xl: 4rem; --espacio-2xl: 6rem; --espacio-3xl: 8rem; /* Layout */ --ancho-maximo: 1180px; --ancho-texto: 62ch; --radio-suave: 4px; --radio-medio: 10px; /* Transiciones */ --transicion-rapida: 180ms ease; --transicion-media: 320ms ease; } /* ========================================= 1.1 TIPOGRAFÍA DE MARCA — VOGUE / CLASSIC VOGUE ----------------------------------------- Vogue y Classic Vogue son tipografías con licencia comercial: no están disponibles en Google Fonts ni en ningún repositorio público, por lo que no se incluyen los archivos de fuente en esta entrega. Sumar aquí los .woff2 con licencia vigente: assets/fonts/Vogue-Regular.woff2 assets/fonts/ClassicVogue-Regular.woff2 Mientras no estén los archivos, el sistema cae automáticamente en Cormorant Garamond (vía Google Fonts, ya enlazada en el ) para no dejar el sitio sin tipografía. SOLUCIÓN PARA ACENTOS Y Ñ: Muchas fuentes de moda/editoriales como Vogue no incluyen glifos para vocales acentuadas, "ñ", "¿" o "¡". En vez de cambiar la tipografía completa del texto que contiene un acento, se declaran DOS @font-face bajo el mismo nombre de familia, cada uno con un `unicode-range` distinto: - El primero cubre caracteres básicos (sin acentos) y usa el archivo Vogue real. - El segundo cubre específicamente vocales acentuadas, ñ/Ñ, ü/Ü, ¿ y ¡, y usa la tipografía de respaldo. El navegador elige el archivo correcto letra por letra, de forma automática: una palabra como "Reflexología" se ve en Vogue salvo la "í" y la "í" final, que caen en el respaldo, sin que se note un salto de estilo brusco porque el respaldo es una serif de proporciones compatibles. ========================================= */ /* --- VOGUE: caracteres base (sin acentos) --- */ @font-face { font-family: 'Vogue'; src: url('../assets/fonts/Vogue-Regular.woff2') format('woff2'), url('../assets/fonts/Vogue-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00A0, U+00A2-00A8, U+00AA-00B8, U+00BA, U+00BC-00BE, U+00D7, U+00F7, U+2000-206F; } /* --- VOGUE: acentos, Ñ/ñ, Ü/ü, ¿ y ¡ → respaldo automático --- */ @font-face { font-family: 'Vogue'; src: local('Cormorant Garamond'); font-weight: 400; font-style: normal; unicode-range: U+00A1, U+00A9, U+00BF, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F; } /* --- CLASSIC VOGUE: caracteres base (sin acentos) --- */ @font-face { font-family: 'Classic Vogue'; src: url('../assets/fonts/ClassicVogue-Regular.woff2') format('woff2'), url('../assets/fonts/ClassicVogue-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00A0, U+00A2-00A8, U+00AA-00B8, U+00BA, U+00BC-00BE, U+00D7, U+00F7, U+2000-206F; } /* --- CLASSIC VOGUE: acentos, Ñ/ñ, Ü/ü, ¿ y ¡ → respaldo automático --- */ @font-face { font-family: 'Classic Vogue'; src: local('Cormorant Garamond'); font-weight: 500; font-style: normal; unicode-range: U+00A1, U+00A9, U+00BF, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F; } /* ========================================= 2. RESET ========================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; } /* ========================================= 3. ESTILOS GLOBALES ========================================= */ body { font-family: var(--font-texto); font-size: var(--paso-base); line-height: 1.65; color: var(--texto-principal); background-color: var(--crema); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 500; line-height: 1.15; color: var(--azul-principal); } h1 { font-family: var(--font-display); } h2, h3 { font-family: var(--font-titulos); } p { max-width: var(--ancho-texto); } .section-title, .cta-title { max-width: none; } :focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } /* ========================================= 4. UTILIDADES ========================================= */ .container { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: var(--espacio-md); } .eyebrow { font-family: var(--font-titulos); font-size: var(--paso-sm); color: var(--terracota); letter-spacing: 0.02em; margin-bottom: var(--espacio-xs); } .skip-link { position: absolute; left: -999px; top: auto; background: var(--azul-principal); color: var(--crema); padding: var(--espacio-xs) var(--espacio-sm); z-index: 200; } .skip-link:focus { left: var(--espacio-sm); top: var(--espacio-sm); } [hidden] { display: none !important; } /* ========================================= 5. LAYOUT ========================================= */ main { display: block; } section { padding-block: var(--espacio-2xl); } .section-title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, var(--paso-xl)); margin-bottom: var(--espacio-lg); } /* ========================================= 6. COMPONENTES ========================================= */ /* --- Botones --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.85rem 1.75rem; font-family: var(--font-texto); font-size: var(--paso-sm); font-weight: 600; border-radius: var(--radio-suave); border: 1px solid transparent; transition: background-color var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida), transform var(--transicion-rapida); } .btn-primary { background-color: var(--azul-principal); color: var(--crema); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--azul-oscuro); } .btn-ghost { background-color: transparent; color: var(--azul-principal); border-color: var(--azul-principal); } .btn-ghost:hover, .btn-ghost:focus-visible { background-color: var(--azul-principal); color: var(--crema); } .btn-large { min-height: 56px; padding: 1rem 2.25rem; font-size: var(--paso-base); } .btn:active { transform: translateY(1px); } /* --- Tarjetas genéricas --- */ .card { background-color: var(--superficie); border-radius: var(--radio-medio); box-shadow: var(--sombra-suave); } /* ========================================= 7. MÓDULOS DE PÁGINA ========================================= */ /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: rgba(242, 236, 224, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid transparent; transition: box-shadow var(--transicion-media), border-color var(--transicion-media), background-color var(--transicion-media); } .site-header.is-scrolled { border-color: var(--borde-suave); box-shadow: 0 8px 24px rgba(59, 85, 112, 0.08); } .header-inner { display: flex; align-items: center; justify-content: center; padding-block: 0.5rem; } .brand { display: inline-flex; align-items: center; } .brand-logo { height: 48px; width: auto; transition: height var(--transicion-media); } .site-header.is-scrolled .brand-logo { height: 40px; } /* ---------- HERO ---------- */ .hero { padding-block: var(--espacio-xl) var(--espacio-lg); background-color: var(--crema); } .hero-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--espacio-2xl); align-items: center; } .hero-copy { max-width: 46ch; } .hero-content .eyebrow, .hero-copy .eyebrow { color: var(--terracota); } .hero-title { font-size: clamp(2.1rem, 1.6rem + 2.2vw, var(--paso-3xl)); color: var(--azul-principal); margin-bottom: var(--espacio-sm); } .hero-text { font-size: var(--paso-md); color: var(--texto-principal); margin-bottom: var(--espacio-sm); } .hero-meta { font-size: var(--paso-sm); color: var(--texto-suave); margin-bottom: var(--espacio-lg); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--espacio-sm); } .hero-visual { border-radius: var(--radio-medio); overflow: hidden; box-shadow: var(--sombra-suave); } .hero-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } /* ---------- SHOWREEL ---------- */ .showreel { background-color: var(--superficie); } .video-wrapper { border-radius: var(--radio-medio); overflow: hidden; box-shadow: var(--sombra-suave); background-color: var(--azul-oscuro); } .showreel-video { width: 100%; aspect-ratio: 16 / 9; } /* ---------- SERVICIO ---------- */ .servicio-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--espacio-xl); align-items: center; } .servicio-desc { margin-bottom: var(--espacio-md); } .servicio-lista li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; color: var(--texto-suave); } .servicio-lista li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--terracota); } .servicio-image { border-radius: var(--radio-medio); aspect-ratio: 4 / 3; object-fit: cover; } .servicio-image--retrato { aspect-ratio: 4 / 5; object-position: top center; max-width: 420px; margin-inline: auto; } /* ---------- EXPERIENCIA ---------- */ .experiencia { background-color: var(--superficie-alterna); } .experiencia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-md); margin-bottom: var(--espacio-lg); } .experiencia-card { background-color: var(--superficie); border-radius: var(--radio-medio); padding: var(--espacio-md); } .experiencia-card h3 { font-size: var(--paso-md); margin-bottom: 0.5rem; } .experiencia-card p { font-size: var(--paso-sm); color: var(--texto-suave); } .experiencia-nota { font-size: var(--paso-sm); color: var(--texto-suave); font-style: italic; max-width: 60ch; } /* ---------- PRECIO ---------- */ .precio-card { background-color: var(--superficie); border-radius: var(--radio-medio); box-shadow: var(--sombra-suave); padding: var(--espacio-xl); max-width: 620px; margin-inline: auto; text-align: center; } .precio-card .section-title { font-family: var(--font-display); } .precio-detalle { margin-block: var(--espacio-lg); text-align: left; border-top: 1px solid var(--borde-suave); } .precio-fila { display: flex; justify-content: space-between; padding-block: 0.85rem; border-bottom: 1px solid var(--borde-suave); } .precio-fila dt { color: var(--texto-suave); } .precio-fila dd { font-weight: 600; color: var(--azul-principal); } .precio-nota { font-size: var(--paso-xs); color: var(--texto-suave); margin-top: var(--espacio-md); } /* ---------- DÓNDE ---------- */ .donde-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-xl); align-items: center; } .donde-lista { margin-top: var(--espacio-md); } .donde-lista li { padding-block: 0.5rem; border-bottom: 1px solid var(--borde-suave); color: var(--texto-suave); } .donde-mapa { border-radius: var(--radio-medio); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sombra-suave); } .donde-mapa iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); } /* ---------- FORMAS DE PAGO ---------- */ .pago { background-color: var(--superficie); } .pago-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-md); } .pago-item { border: 1px solid var(--borde-suave); border-radius: var(--radio-medio); padding: var(--espacio-md); } .pago-item h3 { font-size: var(--paso-base); margin-bottom: 0.4rem; } .pago-item p { font-size: var(--paso-sm); color: var(--texto-suave); } /* ---------- CÓMO RESERVAR ---------- */ .pasos-lista { display: grid; gap: var(--espacio-lg); margin-bottom: var(--espacio-lg); } .paso { display: grid; grid-template-columns: 56px 1fr; gap: var(--espacio-md); align-items: start; } .paso-numero { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--azul-principal); color: var(--azul-principal); font-family: var(--font-titulos); font-size: var(--paso-lg); } .paso-texto h3 { font-size: var(--paso-md); margin-bottom: 0.3rem; } .paso-texto p { color: var(--texto-suave); } .reservar-cta { text-align: center; margin-top: var(--espacio-lg); } /* ---------- CTA PRINCIPAL ---------- */ .cta-principal { background-color: var(--azul-principal); color: var(--crema); text-align: center; } .cta-title { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, var(--paso-2xl)); color: var(--crema); margin-bottom: var(--espacio-sm); } .cta-text { color: var(--celeste-claro); max-width: 52ch; margin-inline: auto; margin-bottom: var(--espacio-lg); } .cta-principal .btn-primary { background-color: var(--terracota); color: var(--crema); } .cta-principal .btn-primary:hover, .cta-principal .btn-primary:focus-visible { background-color: #a9613f; } /* ---------- FAQ ---------- */ .faq-list { max-width: 760px; border-top: 1px solid var(--borde-suave); } .faq-item { border-bottom: 1px solid var(--borde-suave); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-md); text-align: left; padding-block: var(--espacio-md); font-family: var(--font-titulos); font-size: var(--paso-base); color: var(--azul-principal); } .faq-question::after { content: '+'; font-family: var(--font-texto); font-size: 1.5rem; font-weight: 300; color: var(--terracota); flex-shrink: 0; transition: transform var(--transicion-rapida); } .faq-question[aria-expanded="true"]::after { transform: rotate(45deg); } .faq-answer { padding-bottom: var(--espacio-md); color: var(--texto-suave); max-width: 65ch; } /* ---------- WHATSAPP FLOTANTE ---------- */ .whatsapp-float { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 150; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #25D366; color: #FFFFFF; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4); transition: transform var(--transicion-rapida); } .whatsapp-float:hover, .whatsapp-float:focus-visible { transform: scale(1.06); } .whatsapp-icon { width: 28px; height: 28px; } /* ---------- FOOTER ---------- */ .site-footer { background-color: var(--azul-oscuro); color: var(--celeste-claro); padding-top: var(--espacio-xl); padding-bottom: var(--espacio-lg); } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--espacio-md); padding-bottom: var(--espacio-lg); border-bottom: 1px solid rgba(184, 212, 232, 0.2); margin-bottom: var(--espacio-md); } .footer-nombre { font-family: var(--font-titulos); font-size: var(--paso-md); color: var(--crema); } .footer-descriptor { color: var(--celeste-claro); } .footer-zona { font-size: var(--paso-sm); color: var(--celeste); margin-top: 0.25rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--espacio-md); align-items: center; } .footer-nav a { font-size: var(--paso-sm); } .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--crema); } .footer-aclaracion { font-size: var(--paso-xs); color: var(--celeste); max-width: 70ch; margin-bottom: var(--espacio-sm); } .footer-copy { font-size: var(--paso-xs); color: var(--celeste); } /* ---------- BOTÓN VOLVER ARRIBA ---------- */ .back-to-top { position: fixed; left: max(1.25rem, env(safe-area-inset-left)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 150; width: 44px; height: 44px; border-radius: 50%; background-color: var(--azul-principal); color: var(--crema); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-suave); } .back-to-top svg { width: 20px; height: 20px; } /* ========================================= 8. ESTADOS INTERACTIVOS ========================================= */ a, button { -webkit-tap-highlight-color: transparent; } .btn:focus-visible, .nav-link:focus-visible, .faq-question:focus-visible, .whatsapp-float:focus-visible, .back-to-top:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } /* ========================================= 9. MEDIA QUERIES (mobile first → hacia arriba) ========================================= */ /* Base ya definida arriba pensada para 360–390px. A partir de acá se amplía para pantallas mayores. */ @media (max-width: 899px) { .servicio-grid, .donde-grid { grid-template-columns: 1fr; } .servicio-media { order: -1; } .experiencia-grid { grid-template-columns: repeat(2, 1fr); } .pago-grid { grid-template-columns: 1fr; } .precio-card { padding: var(--espacio-lg) var(--espacio-md); } .hero-grid { grid-template-columns: 1fr; gap: var(--espacio-lg); } .hero-visual { order: -1; max-width: 420px; margin-inline: auto; width: 100%; } .hero-copy { max-width: none; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } } @media (min-width: 640px) { section { padding-block: var(--espacio-3xl); } } @media (min-width: 900px) { .container { padding-inline: var(--espacio-lg); } } @media (min-width: 1200px) { .hero-content { max-width: 820px; } } /* ========================================= 10. PREFERENCIAS DE MOVIMIENTO REDUCIDO ========================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }