/* ── Elixir Molecular · Shared Styles ── */ /* ── Zolina (fuente oficial de marca, manual ROSECO.STUDIO 2023) ── */ @font-face { font-family: 'Zolina'; src: url('fonts/zolina-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Zolina'; src: url('fonts/zolina-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Zolina'; src: url('fonts/zolina-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Zapfino (script de marca, Apple/Linotype — usar con licencia) ── */ @font-face { font-family: 'Zapfino'; src: url('fonts/zapfino.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ────────────────────────────────────────────────────────── SISTEMA DE PALETAS POR SERVICIO Manual de marca ELIXIR + feedback cliente 5 mayo 2026 Cada página declara su tema en : theme-paraguas → Negro + Dorado (marca raíz, default) theme-casa → Verde + Dorado (Casa Elixir / Hospedaje) theme-bodas → Beige + Dorado (sub-sección Bodas) theme-eventos → Azul oscuro + Dorado (Eventos Elixir) theme-boutique → Vino tinto + Dorado (Boutique) Si el body no declara tema, hereda el default (paraguas). ────────────────────────────────────────────────────────── */ :root { /* ── Tokens fijos compartidos por todos los temas ── */ --dorado: #C5A25A; --dorado-pale: #D9BC80; --perla: #F1EBE0; --perla-dark: #E8E0D4; /* ── Identidad ELIXIR PARAGUAS (default = Negro + Dorado) ── */ --primary: #0A0A0A; --primary-mid: #1A1A1A; --primary-light: #2A2A2A; --primary-rgb: 10, 10, 10; /* RGB canal por canal para usar con opacidad */ --dorado-rgb: 197, 162, 90; --perla-rgb: 241, 235, 224; --bg-light: #F1EBE0; --texto: rgba(10,10,10,0.72); --texto-light: rgba(10,10,10,0.42); /* ── Aliases legacy para no romper el CSS existente ── */ --verde: var(--primary); --verde-mid: var(--primary-mid); --verde-light: var(--primary-light); --negro: #0A0A0A; } /* ── Tema CASA ELIXIR (hospedaje) ── verde + dorado */ body.theme-casa { --primary: #0A200D; --primary-mid: #1C3A1F; --primary-light: #364625; --primary-rgb: 10, 32, 13; --bg-light: #F1EBE0; --texto: rgba(var(--primary-rgb),0.72); --texto-light: rgba(var(--primary-rgb),0.42); --verde: var(--primary); --verde-mid: var(--primary-mid); --verde-light: var(--primary-light); } /* ── Tema BODAS ── beige claro + dorado */ body.theme-bodas { --primary: #2A1F12; --primary-mid: #4A3826; --primary-light: #6B5A42; --primary-rgb: 42, 31, 18; --bg-light: #F4ECDF; --texto: rgba(42,31,18,0.78); --texto-light: rgba(42,31,18,0.48); --verde: var(--primary); --verde-mid: var(--primary-mid); --verde-light: var(--primary-light); } /* ── Tema EVENTOS ELIXIR ── azul oscuro + dorado */ body.theme-eventos { --primary: #0B1E3F; --primary-mid: #142F5C; --primary-light: #234478; --primary-rgb: 11, 30, 63; --bg-light: #F1EBE0; --texto: rgba(11,30,63,0.78); --texto-light: rgba(11,30,63,0.48); --verde: var(--primary); --verde-mid: var(--primary-mid); --verde-light: var(--primary-light); } /* ── Tema BOUTIQUE ── vino tinto + dorado */ body.theme-boutique { --primary: #3A0F18; --primary-mid: #561A26; --primary-light: #7A2A38; --primary-rgb: 58, 15, 24; --bg-light: #F1EBE0; --texto: rgba(58,15,24,0.78); --texto-light: rgba(58,15,24,0.48); --verde: var(--primary); --verde-mid: var(--primary-mid); --verde-light: var(--primary-light); } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Lora', serif; background: var(--perla); color: var(--verde); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--perla); } ::-webkit-scrollbar-thumb { background: var(--dorado); } /* ── Navbar ── */ #navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 28px 72px; transition: background 0.5s ease, padding 0.4s ease; } #navbar.scrolled, #navbar.solid { background: rgba(var(--primary-rgb), 0.97); padding: 18px 72px; backdrop-filter: blur(16px); } .logo { text-decoration: none; display: flex; align-items: center; } .logo-img { width: 160px; height: 80px; object-fit: cover; object-position: center 50%; filter: url('#gold-logo'); } .nav-links { display: flex; align-items: center; gap: 44px; } .nav-links a { font-family: 'Zolina', 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.3s ease; position: relative; } .nav-links a.active, .nav-links a:hover { color: var(--dorado); } .nav-cta { font-family: 'Zolina', 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dorado); border: 1px solid rgba(197,162,90,0.45); padding: 11px 28px; text-decoration: none; transition: all 0.35s ease; } .nav-cta:hover { background: var(--dorado); color: var(--verde); } /* ── Page hero (interior pages) ── */ .page-hero { background: var(--verde); padding: 200px 72px 120px; position: relative; overflow: hidden; } .hero-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 48px; pointer-events: none; user-select: none; font-family: 'Zolina', 'Cinzel', serif; color: rgba(197,162,90,0.04); font-size: 40vw; line-height: 0.85; font-weight: 700; } .page-hero-inner { max-width: 900px; position: relative; z-index: 2; } .page-label { display: block; font-family: 'Zolina', 'Cinzel', serif; color: rgba(197,162,90,0.45); font-size: 0.52rem; letter-spacing: 0.5em; text-transform: uppercase; margin-bottom: 32px; } .page-hero h1 { font-family: 'Zolina', 'Cinzel', serif; font-weight: 400; font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--perla); line-height: 1.08; } .page-hero h1 em { font-family: 'Zapfino', 'Great Vibes', cursive; text-transform: none; letter-spacing: 0; font-style: normal; color: var(--dorado); font-size: 1.3em; vertical-align: -0.1em; } .page-hero .sub { font-family: 'Lora', serif; font-style: italic; color: rgba(241,235,224,0.35); font-size: 1rem; margin-top: 28px; line-height: 1.9; max-width: 480px; } /* ── Gold line ── */ .gl { display: block; width: 40px; height: 1px; background: var(--dorado); margin-bottom: 28px; } .gl-c { display: block; width: 40px; height: 1px; background: var(--dorado); margin: 0 auto 28px; } /* ── Section wrapper ── */ .wrap { max-width: 1080px; margin: 0 auto; padding: 0 72px; } /* ── Typography helpers ── */ .t-label { font-family: 'Zolina', 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(var(--primary-rgb),0.4); } .t-label-inv { color: rgba(197,162,90,0.4); } .t-heading { font-family: 'Zolina', 'Cinzel', serif; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; } .t-script { font-family: 'Zapfino', 'Great Vibes', cursive; } .t-body { font-family: 'Lora', serif; line-height: 1.9; font-size: 0.95rem; color: var(--texto); } .t-italic { font-style: italic; color: var(--texto-light); } /* ── Buttons ── */ .btn { display: inline-block; font-family: 'Zolina', 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.4em; text-transform: uppercase; padding: 16px 44px; text-decoration: none; transition: all 0.35s ease; } .btn-gold { background: var(--dorado); color: var(--verde); } .btn-gold:hover { background: var(--dorado-pale); } .btn-dark { background: var(--verde); color: var(--dorado); border: 1px solid var(--verde); } .btn-dark:hover { background: var(--verde-mid); } .btn-outline-dark { border: 1px solid var(--verde); color: var(--verde); } .btn-outline-dark:hover { background: var(--verde); color: var(--perla); } .btn-outline-light { border: 1px solid rgba(241,235,224,0.2); color: rgba(241,235,224,0.7); } .btn-outline-light:hover { border-color: var(--dorado); color: var(--dorado); } /* ── Footer ── */ footer { background: var(--verde); padding: 80px 72px 48px; border-top: 1px solid rgba(197,162,90,0.08); } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; max-width: 1080px; margin: 0 auto; padding-bottom: 64px; border-bottom: 1px solid rgba(197,162,90,0.08); } .footer-brand { display: block; font-family: 'Zolina', 'Cinzel', serif; color: var(--dorado); font-size: 1.5rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 6px; } .footer-est { font-family: 'Lora', serif; font-style: italic; color: rgba(241,235,224,0.2); font-size: 0.8rem; margin-bottom: 20px; display: block; } .footer-tagline { font-family: 'Lora', serif; font-style: italic; color: rgba(241,235,224,0.3); font-size: 0.85rem; line-height: 1.8; max-width: 260px; } .footer-socials { display: flex; gap: 10px; margin-top: 28px; } .footer-socials a { width: 34px; height: 34px; border: 1px solid rgba(197,162,90,0.15); display: flex; align-items: center; justify-content: center; font-family: 'Zolina', 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 0.1em; color: rgba(197,162,90,0.3); text-decoration: none; transition: all 0.3s; } .footer-socials a:hover { border-color: var(--dorado); color: var(--dorado); } .footer-col-label { font-family: 'Zolina', 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(197,162,90,0.35); margin-bottom: 24px; display: block; } .footer-col ul { list-style: none; } .footer-col ul li + li { margin-top: 14px; } .footer-col ul li a { font-family: 'Lora', serif; font-size: 0.85rem; color: rgba(241,235,224,0.3); text-decoration: none; transition: color 0.3s; } .footer-col ul li a:hover { color: var(--dorado); } .footer-bottom { max-width: 1080px; margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; } .footer-bottom span { font-family: 'Zolina', 'Cinzel', serif; font-size: 0.48rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(241,235,224,0.12); } /* ── WA Float ── */ .wa-float { position: fixed; bottom: 36px; right: 36px; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: var(--verde); border: 1px solid rgba(197,162,90,0.4); display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,0.25); transition: transform 0.3s, background 0.3s; } .wa-float:hover { transform: scale(1.08); background: var(--verde-mid); } .wa-float .material-symbols-outlined { color: var(--dorado); font-size: 1.3rem; font-variation-settings: 'FILL' 1; } /* ── Responsive ── */ @media (max-width: 900px) { #navbar, #navbar.scrolled, #navbar.solid { padding: 20px 28px; } .nav-links { display: none; } .page-hero { padding: 160px 28px 80px; } .wrap { padding: 0 28px; } footer { padding: 64px 28px 40px; } .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } }