/* ========================================================================== RESET BÁSICO ========================================================================== Normaliza el comportamiento de márgenes y padding entre navegadores. ========================================================================== */ *{ margin:0; padding:0; box-sizing:border-box; } /* ======================================================================= MODOS DE COLOR ======================================================================= Define los tokens para light mode y dark mode. JavaScript cambia el atributo data-theme del documento. ======================================================================= */ :root{ color-scheme:light; --color-primary:#D6AAA0; --color-primary-dark:#C99487; --color-text:#5B4A45; --color-text-soft:#9D8076; --color-card:rgba(255,255,255,.70); --color-card-border:rgba(255,255,255,.75); --color-page-from:#FDF9F8; --color-page-via:#F8F1EE; --color-page-to:#F2E4DF; --color-blob:rgba(214,170,160,.35); --color-blob-soft:rgba(214,170,160,.25); --color-button:#FFFFFF; --color-button-text:#A9897E; --color-focus:#C99487; --shadow-card:0 20px 60px rgba(0,0,0,.08); --shadow-button:0 8px 20px rgba(0,0,0,.06); --shadow-button-hover:0 14px 30px rgba(0,0,0,.10); --shadow-map:0 12px 30px rgba(0,0,0,.08); } :root[data-theme="dark"]{ color-scheme:dark; --color-primary:#E8B9AD; --color-primary-dark:#C99487; --color-text:#F7E9E5; --color-text-soft:#D8BDB5; --color-card:rgba(36,28,34,.76); --color-card-border:rgba(255,255,255,.14); --color-page-from:#120D12; --color-page-via:#211820; --color-page-to:#3A252C; --color-blob:rgba(232,185,173,.22); --color-blob-soft:rgba(143,92,109,.30); --color-button:rgba(255,255,255,.10); --color-button-text:#F5DAD3; --color-focus:#F2C8BE; --shadow-card:0 24px 70px rgba(0,0,0,.35); --shadow-button:0 10px 24px rgba(0,0,0,.24); --shadow-button-hover:0 16px 34px rgba(0,0,0,.34); --shadow-map:0 16px 36px rgba(0,0,0,.35); } /* ========================================================================== BASE DEL DOCUMENTO ========================================================================== */ html{ min-height:100%; } body{ background: linear-gradient( 135deg, var(--color-page-from), var(--color-page-via), var(--color-page-to) ) !important; color: var(--color-text); transition: background .35s ease, color .35s ease; } .card, .social-button, .theme-toggle, .map{ transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease; } /* ========================================================================== FONDOS DECORATIVOS ========================================================================== Blobs difuminados que aportan profundidad visual. No contienen contenido funcional. ========================================================================== */ .background-blob{ position:fixed; width:350px; height:350px; border-radius:9999px; filter:blur(100px); pointer-events:none; z-index:-1; } .top-blob{ top:-150px; left:-150px; background: var(--color-blob); } .bottom-blob{ right:-150px; bottom:-150px; background: var(--color-blob-soft); } /* ========================================================================== SELECTOR DE TEMA ========================================================================== Botón flotante para alternar entre light mode y dark mode. ========================================================================== */ .theme-toggle{ position:fixed; top:1.25rem; right:1.25rem; z-index:10; min-height:46px; display:inline-flex; align-items:center; gap:.55rem; padding:.6rem 1rem; border:1px solid var(--color-card-border); border-radius:999px; background: var(--color-card); backdrop-filter: blur(18px); color: var(--color-text); font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; box-shadow: var(--shadow-button); cursor:pointer; } .theme-toggle:hover{ transform: translateY(-2px); box-shadow: var(--shadow-button-hover); } .theme-toggle__icon{ width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:999px; color:white; background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark) ); } /* ========================================================================== TARJETA PRINCIPAL ========================================================================== Componente visual más importante del proyecto. Funciones: - Agrupar contenido. - Generar foco visual. - Aplicar efecto glassmorphism premium. ========================================================================== */ .card{ width:100%; max-width:900px; padding:2.5rem; border-radius:40px; background: var(--color-card); backdrop-filter: blur(24px); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-card); } /* ========================================================================== IDENTIDAD DE MARCA ========================================================================== Elementos relacionados con el nombre del salón. ========================================================================== */ .brand-title{ font-family: 'Cormorant Garamond', serif; font-size: clamp( 4rem, 8vw, 5rem ); line-height:1; color: var(--color-text); } .brand-subtitle{ margin-top: .75rem; font-size: .75rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-text-soft); } /* ========================================================================== BOTÓN PRINCIPAL (CTA) ========================================================================== Objetivo: Convertir visitas en citas. Debe ser el elemento visual dominante. ========================================================================== */ .cta-button{ width:100%; height:68px; display:flex; align-items:center; justify-content:center; gap:.75rem; border-radius:999px; text-decoration:none; color:white; font-weight:600; letter-spacing:.04em; background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark) ); box-shadow: 0 16px 40px rgba(201,148,135,.35); transition: all .30s ease; } .cta-button:hover{ transform: translateY(-3px); box-shadow: 0 24px 50px rgba(201,148,135,.40); } .cta-button:active{ transform: scale(.98); } /* ========================================================================== ICONO DEL CTA ========================================================================== */ .cta-button i{ font-size: 1.3rem; } /* ========================================================================== CONTENEDOR DE REDES SOCIALES ========================================================================== Mantiene una distribución flexible uniforme para todos los enlaces. ========================================================================== */ .social-container{ margin-top:2rem; display:flex; justify-content:center; align-items:center; gap:.85rem; flex-wrap:wrap; } /* ========================================================================== BOTONES SOCIALES ========================================================================== Diseño minimalista premium. Incluyen icono y nombre para mejorar reconocimiento y área táctil. ========================================================================== */ .social-button{ min-width:150px; height:58px; padding:0 1.35rem; display:flex; align-items:center; justify-content:center; gap:.6rem; border-radius:999px; text-decoration:none; background: var(--color-button); color: var(--color-button-text); font-size:1.15rem; font-weight:600; letter-spacing:.02em; box-shadow: var(--shadow-button); transition: all .25s ease; } .social-button span{ font-size:.9rem; } .social-button:hover{ transform: translateY(-4px); color: var(--color-primary-dark); box-shadow: var(--shadow-button-hover); } /* ========================================================================== MAPA ========================================================================== Componente de ubicación. Se integra visualmente con el diseño mediante esquinas redondeadas. ========================================================================== */ .map{ width:100%; height:280px; border:none; border-radius:28px; overflow:hidden; box-shadow: var(--shadow-map); } /* ========================================================================== ACCESIBILIDAD ========================================================================== Mejora navegación mediante teclado. ========================================================================== */ *:focus-visible{ outline: 3px solid var(--color-focus); outline-offset: 4px; } /* ========================================================================== ANIMACIÓN DE ENTRADA ========================================================================== Utilizada por JavaScript para revelar elementos cuando aparecen en pantalla. ========================================================================== */ .fade-in{ opacity:0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; } .fade-in.visible{ opacity:1; transform: translateY(0); } /* ========================================================================== RESPONSIVE DESIGN ========================================================================== Ajustes específicos para móviles. ========================================================================== */ @media (max-width:640px){ .card{ padding:2rem; border-radius:32px; } .social-container{ gap:.75rem; } .social-button{ width:100%; min-width:0; height:54px; } .map{ height:240px; } .theme-toggle{ top:.85rem; right:.85rem; padding:.55rem .85rem; } .theme-toggle__text{ display:none; } }