diff --git a/assets/iconos/buzon.svg b/assets/iconos/buzon.svg new file mode 100644 index 0000000..2d38d43 --- /dev/null +++ b/assets/iconos/buzon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/iconos/contacto.svg b/assets/iconos/contacto.svg new file mode 100644 index 0000000..9370aee --- /dev/null +++ b/assets/iconos/contacto.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + diff --git a/includes/menu.html b/includes/menu.html index 75c9fd2..e26a245 100644 --- a/includes/menu.html +++ b/includes/menu.html @@ -10,8 +10,14 @@ Modo oscuro Modo claro + @@ -20,12 +26,12 @@ - +
- +

Inicio

    @@ -39,7 +45,7 @@
- +

Navegación

\ No newline at end of file diff --git a/inicio.html b/inicio.html index dbd448d..87fbb27 100644 --- a/inicio.html +++ b/inicio.html @@ -4,7 +4,8 @@ - Inicio - [Nombre de la agencia] + Inicio - A&R + diff --git a/style/main.css b/style/main.css index 6a9f053..adfdb41 100644 --- a/style/main.css +++ b/style/main.css @@ -1,3 +1,9 @@ +/* ============================================ + FUENTES DE MARCA + ============================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap'); + /* ============================================ VARIABLES DE TEMA (modo claro por defecto) ============================================ */ @@ -31,8 +37,14 @@ --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); --glow-animation: rgba(186, 18, 77, 0.25); - /* Tipografía - se completará */ - --font-family-base: sans-serif; + /* Tipografía de Marca */ + --font-title: 'Literata', serif; + --font-subtitle: 'Literata', serif; + --font-body: 'Raleway', sans-serif; + --font-small: 'Jost', sans-serif; + --font-signature: 'Windsong', cursive; + + --font-family-base: var(--font-body); --font-size-base: 16px; /* Espaciados - se completarán */ @@ -92,6 +104,42 @@ body { flex-direction: column; transition: background-color 0.3s ease, color 0.3s ease; } +/* Títulos principales */ +h1, +h2, +h3 { + font-family: var(--font-title); + font-style: italic; + font-weight: 700; +} + +/* Subtítulos */ +h4, +h5, +h6 { + font-family: var(--font-subtitle); + font-style: italic; + font-weight: 400; +} + +/* Textos pequeños */ +small { + font-family: var(--font-small); +} + +/* Botones */ +button, +.btn, +[class*="btn-"] { + font-family: var(--font-small); +} + +/* Firmas / textos manuscritos */ +.signature, +.firma { + font-family: var(--font-signature); + font-weight: 400; +} body.menu-open { overflow: hidden; @@ -177,7 +225,21 @@ ul { } /* Base común para botones (menú y tema) */ -.menu-toggle, +.menu-toggle { + background: none; + border: 1px solid var(--border); + color: var(--text-primary); + padding: 0.45rem 1.1rem; + cursor: pointer; + font-size: 0.95rem; + font-weight: 500; + border-radius: 24px; /* Bordes redondeados modernos */ + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; /* Separación entre el icono y el texto */ + transition: all 0.3s ease; +} .theme-toggle { background: none; border: 1px solid var(--border); @@ -189,12 +251,27 @@ ul { transition: all 0.3s ease; } -.menu-toggle:hover, +.menu-toggle:hover { + background-color: var(--bg-surface-elevated); + border-color: var(--text-primary); +} .theme-toggle:hover { background-color: var(--bg-surface-elevated); border-color: var(--text-primary); } +.menu-icon { + width: 18px; + height: 18px; + display: block; + flex-shrink: 0; + transition: transform 0.2s ease; +} + +.menu-toggle:hover .menu-icon { + transform: scale(1.08); +} + /* ============================================ SWITCH DE TEMA (ESPECÍFICO CON ANIMACIÓN) ============================================ */ @@ -269,7 +346,8 @@ ul { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(34, 23, 40, 0.9); + backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; @@ -286,14 +364,16 @@ ul { bottom: 0; left: 0; width: 100%; - height: 50vh; /* Mitad del alto en desktop */ + height: 52vh; /* Mitad del alto en desktop */ background-color: var(--bg-surface); + border-top-left-radius: 20px; + border-top-right-radius: 20px; transform: translateY(100%); - transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 999; overflow-y: auto; padding: var(--spacing-md) var(--spacing-lg); - box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.15); + box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.15); } .fullscreen-menu.is-open { @@ -307,66 +387,72 @@ ul { background: none; border: 1px solid var(--border); color: var(--text-primary); - font-size: 1.5rem; - width: 40px; - height: 40px; + font-size: 1.1rem; + width: 36px; + height: 36px; cursor: pointer; - border-radius: 4px; + border-radius: 50%; display: flex; align-items: center; justify-content: center; - transition: all 0.3s ease; + transition: all 0.25s ease; } .menu-close:hover { background-color: var(--bg-surface-elevated); border-color: var(--text-primary); + transform: rotate(90deg); } .menu-content { display: grid; grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-md); - max-width: 1400px; + gap: var(--spacing-lg); + max-width: 1200px; margin: 0 auto; - height: 100%; - align-content: start; + padding-top: 0.5rem; } .menu-column h3 { - font-size: 1rem; + font-family: var(--font-small); + font-style: normal; + font-size: 0.85rem; + letter-spacing: 1.2px; + text-transform: uppercase; margin-bottom: var(--spacing-sm); color: var(--text-secondary); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; + font-weight: 700; + border-bottom: 1px solid var(--border); + padding-bottom: 0.4rem; } .menu-column ul { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: 0.35rem; } .menu-column a { color: var(--text-primary); font-size: 0.95rem; - transition: color 0.3s ease; - display: block; - padding: 0.2rem 0; + padding: 0.25rem 0; + display: inline-block; + transition: transform 0.2s ease, color 0.2s ease; } .menu-column a:hover { color: var(--btn-primary-bg); + transform: translateX(4px); } /* Columna 3 - Contacto y botones */ .menu-contact-info { margin-bottom: var(--spacing-sm); + } .menu-contact-info p { - margin-bottom: 0.25rem; + margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.9rem; } @@ -374,54 +460,108 @@ ul { .menu-social { display: flex; gap: var(--spacing-sm); - margin-top: var(--spacing-xs); + margin: var(--spacing-xs) 0 var(--spacing-sm); } .menu-social a { - font-size: 0.9rem; + font-size: 0.85rem; + font-weight: 600; color: var(--text-secondary); } .menu-buttons { display: flex; flex-direction: column; - gap: var(--spacing-xs); - margin-top: var(--spacing-sm); + gap: 0.65rem; } .btn-menu { display: block; - padding: 0.6rem 1.2rem; + padding: 0.65rem 1.2rem; text-align: center; - border-radius: 4px; + border-radius: 999px; font-weight: 600; font-size: 0.9rem; - transition: all 0.3s ease; + transition: all 0.25s ease; } .btn-menu-primary { background-color: var(--btn-primary-bg); - color: var(--text-on-accent); + color: var(--text-on-accent) !important; + border: 1.5px solid var(--btn-primary-bg); + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); } .btn-menu-primary:hover { background-color: var(--btn-primary-hover); + border-color: var(--btn-primary-hover); + transform: translateY(-1px); } .btn-menu-secondary { - background-color: var(--btn-secondary-bg); - color: var(--text-on-accent); + background-color: transparent; + border: 1.5px solid var(--text-secondary); + color: var(--text-primary); } .btn-menu-secondary:hover { - background-color: var(--btn-secondary-hover); + background-color: var(--bg-surface-elevated); + border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); + transform: translateY(-1px); +} +.menu-brand { + margin-top: 1.75rem; + display: flex; + justify-content: flex-end; + align-items: center; + border-top: none; } +.menu-brand img { + height: 36px; + width: auto; + opacity: 0.95; + transition: opacity 0.2s ease; +} + +.menu-brand img:hover { + opacity: 1; +} +.contact-item { + display: flex; + align-items: center; + gap: 0.6rem; + color: var(--text-primary); +} + +.contact-icon { + width: 24px; + height: 16px; + display: inline-block; + background-color: currentColor; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; +} + +.icon-email { + -webkit-mask-image: url("../assets/iconos/buzon.svg"); + mask-image: url("../assets/iconos/buzon.svg"); +} +.icon-phone { + -webkit-mask-image: url("../assets/iconos/contacto.svg"); + mask-image: url("../assets/iconos/contacto.svg"); +} /* Responsive - Mobile */ @media (max-width: 768px) { .fullscreen-menu { height: 85vh; /* En mobile ocupa más espacio */ padding: var(--spacing-md); + padding-bottom: var(--spacing-lg); } .menu-content {