From 8280d59d84a4bcb0832c2a3474329bb6314fdda4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gestor=C3=ADa=20LP?= Date: Sun, 1 Mar 2026 23:59:13 +0000 Subject: [PATCH] feat: public site landing page with header, footer, styles - Header with fixed navbar, responsive mobile menu, services dropdown - Landing page with hero, services grid, value propositions, testimonials, contact - Comprehensive CSS (1300+ lines): navy/gold brand colors, custom properties, responsive breakpoints, card hover effects, form styles, print & a11y - Footer with 3-column layout, contact info, social links - JS: hamburger toggle, smooth scroll, navbar scroll effect, scroll animations Co-Authored-By: Claude Opus 4.6 --- assets/css/style.css | 1342 ++++++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 169 ++++++ includes/footer.php | 67 +++ includes/header.php | 66 +++ index.php | 282 +++++++++ 5 files changed, 1926 insertions(+) create mode 100644 assets/css/style.css create mode 100644 assets/js/main.js create mode 100644 includes/footer.php create mode 100644 includes/header.php create mode 100644 index.php diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..f1a4c45 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,1342 @@ +/* ============================================================ + Gestoría LP — Main Stylesheet + Professional immigration services site + Color scheme: Navy Blue (#1B3A5C) + Gold (#C9A94E) + ============================================================ */ + +/* ----- CSS Custom Properties ----- */ +:root { + /* Brand colors */ + --color-primary: #1B3A5C; + --color-primary-dark: #122841; + --color-primary-light: #2A5580; + --color-accent: #C9A94E; + --color-accent-dark: #B0912F; + --color-accent-light: #D4BC70; + + /* Neutrals */ + --color-white: #FFFFFF; + --color-off-white: #F8F9FA; + --color-gray-100: #F1F3F5; + --color-gray-200: #E9ECEF; + --color-gray-300: #DEE2E6; + --color-gray-400: #CED4DA; + --color-gray-500: #ADB5BD; + --color-gray-600: #6C757D; + --color-gray-700: #495057; + --color-gray-800: #343A40; + --color-gray-900: #212529; + + /* Semantic */ + --color-success: #28A745; + --color-danger: #DC3545; + --color-warning: #FFC107; + --color-info: #17A2B8; + + /* Typography */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-md: 1.125rem; + --font-size-lg: 1.25rem; + --font-size-xl: 1.5rem; + --font-size-2xl: 2rem; + --font-size-3xl: 2.5rem; + --font-size-4xl: 3rem; + --font-size-5xl: 3.5rem; + --line-height-tight: 1.2; + --line-height-normal: 1.6; + --line-height-loose: 1.8; + + /* Spacing */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4rem; + --space-4xl: 6rem; + + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); + --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); + + /* Borders */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-full: 9999px; + + /* Transitions */ + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 400ms ease; + + /* Layout */ + --navbar-height: 72px; + --container-max: 1200px; + --container-narrow: 800px; +} + +/* ============================================================ + CSS Reset (Modern) + ============================================================ */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + -webkit-text-size-adjust: 100%; + scroll-padding-top: var(--navbar-height); +} + +body { + font-family: var(--font-family); + font-size: var(--font-size-base); + line-height: var(--line-height-normal); + color: var(--color-gray-800); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; + color: inherit; +} + +a { + color: inherit; + text-decoration: none; +} + +ul, +ol { + list-style: none; +} + +h1, h2, h3, h4, h5, h6 { + line-height: var(--line-height-tight); + font-weight: 700; + color: var(--color-gray-900); +} + +p { + margin-bottom: var(--space-md); +} + +p:last-child { + margin-bottom: 0; +} + +/* ============================================================ + Utility: Container + ============================================================ */ +.container { + width: 100%; + max-width: var(--container-max); + margin-left: auto; + margin-right: auto; + padding-left: var(--space-lg); + padding-right: var(--space-lg); +} + +/* ============================================================ + Buttons + ============================================================ */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 0.7rem 1.6rem; + font-size: var(--font-size-base); + font-weight: 600; + border: 2px solid transparent; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-base); + text-align: center; + white-space: nowrap; + line-height: 1.4; +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn:active { + transform: translateY(0); +} + +.btn--primary { + background-color: var(--color-accent); + color: var(--color-primary-dark); + border-color: var(--color-accent); +} + +.btn--primary:hover { + background-color: var(--color-accent-dark); + border-color: var(--color-accent-dark); + box-shadow: var(--shadow-md); +} + +.btn--secondary { + background-color: var(--color-primary); + color: var(--color-white); + border-color: var(--color-primary); +} + +.btn--secondary:hover { + background-color: var(--color-primary-dark); + border-color: var(--color-primary-dark); + box-shadow: var(--shadow-md); +} + +.btn--outline { + background-color: transparent; + color: var(--color-white); + border-color: var(--color-white); +} + +.btn--outline:hover { + background-color: var(--color-white); + color: var(--color-primary); + box-shadow: var(--shadow-md); +} + +.btn--outline-primary { + background-color: transparent; + color: var(--color-primary); + border-color: var(--color-primary); +} + +.btn--outline-primary:hover { + background-color: var(--color-primary); + color: var(--color-white); +} + +.btn--sm { + padding: 0.45rem 1rem; + font-size: var(--font-size-sm); +} + +.btn--lg { + padding: 0.9rem 2rem; + font-size: var(--font-size-md); +} + +.btn--block { + display: flex; + width: 100%; +} + +.btn--whatsapp { + background-color: #25D366; + color: var(--color-white); + border-color: #25D366; +} + +.btn--whatsapp:hover { + background-color: #1DA851; + border-color: #1DA851; +} + +/* ============================================================ + Navigation Bar + ============================================================ */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: var(--navbar-height); + background-color: rgba(255, 255, 255, 0.97); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + z-index: 1000; + transition: box-shadow var(--transition-base), background-color var(--transition-base); +} + +.navbar--scrolled { + box-shadow: var(--shadow-md); +} + +.navbar__inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} + +.navbar__brand { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: var(--font-size-xl); + color: var(--color-primary); + font-weight: 600; + transition: color var(--transition-fast); + text-decoration: none; + flex-shrink: 0; +} + +.navbar__brand i { + font-size: 1.6rem; + color: var(--color-accent); +} + +.navbar__brand strong { + font-weight: 800; +} + +.navbar__list { + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.navbar__link { + display: flex; + align-items: center; + gap: 0.3rem; + padding: 0.5rem 1rem; + font-size: var(--font-size-sm); + font-weight: 500; + color: var(--color-gray-700); + border-radius: var(--radius-md); + transition: color var(--transition-fast), background-color var(--transition-fast); + text-decoration: none; +} + +.navbar__link:hover { + color: var(--color-primary); + background-color: var(--color-gray-100); +} + +.navbar__link--dropdown i { + font-size: 0.6rem; + transition: transform var(--transition-fast); +} + +/* Dropdown */ +.navbar__item--dropdown { + position: relative; +} + +.navbar__dropdown { + position: absolute; + top: 100%; + left: 0; + min-width: 260px; + background-color: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + opacity: 0; + visibility: hidden; + transform: translateY(8px); + transition: all var(--transition-base); + padding: var(--space-sm); + z-index: 100; +} + +.navbar__item--dropdown:hover .navbar__dropdown, +.navbar__item--dropdown.active .navbar__dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.navbar__item--dropdown:hover .navbar__link--dropdown i { + transform: rotate(180deg); +} + +.navbar__dropdown-link { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: 0.65rem 1rem; + font-size: var(--font-size-sm); + color: var(--color-gray-700); + border-radius: var(--radius-md); + transition: all var(--transition-fast); + text-decoration: none; +} + +.navbar__dropdown-link:hover { + background-color: var(--color-gray-100); + color: var(--color-primary); +} + +.navbar__dropdown-link i { + width: 20px; + text-align: center; + color: var(--color-accent); +} + +/* Hamburger Toggle */ +.navbar__toggle { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + width: 40px; + height: 40px; + background: none; + border: none; + cursor: pointer; + padding: 0; + z-index: 1001; +} + +.navbar__toggle-bar { + display: block; + width: 24px; + height: 2.5px; + background-color: var(--color-primary); + border-radius: 2px; + transition: all var(--transition-base); + transform-origin: center; +} + +.navbar__toggle.active .navbar__toggle-bar:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.navbar__toggle.active .navbar__toggle-bar:nth-child(2) { + opacity: 0; + transform: scaleX(0); +} + +.navbar__toggle.active .navbar__toggle-bar:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +/* ============================================================ + Hero Section + ============================================================ */ +.hero { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + padding: calc(var(--navbar-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl); + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%); + overflow: hidden; +} + +.hero__overlay { + position: absolute; + inset: 0; + background-image: + radial-gradient(ellipse at 20% 80%, rgba(201, 169, 78, 0.12) 0%, transparent 50%), + radial-gradient(ellipse at 80% 20%, rgba(201, 169, 78, 0.08) 0%, transparent 50%); + pointer-events: none; +} + +.hero__overlay::before { + content: ''; + position: absolute; + inset: 0; + background: + url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); +} + +.hero__content { + position: relative; + z-index: 1; + text-align: center; + max-width: 780px; +} + +.hero__title { + font-size: var(--font-size-4xl); + font-weight: 800; + color: var(--color-white); + margin-bottom: var(--space-lg); + letter-spacing: -0.02em; + line-height: 1.15; +} + +.hero__subtitle { + font-size: var(--font-size-lg); + color: rgba(255, 255, 255, 0.8); + margin-bottom: var(--space-2xl); + line-height: var(--line-height-loose); + max-width: 620px; + margin-left: auto; + margin-right: auto; +} + +.hero__actions { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-md); + flex-wrap: wrap; +} + +/* ============================================================ + Section Defaults + ============================================================ */ +.section { + padding: var(--space-4xl) 0; +} + +.section:nth-child(even) { + background-color: var(--color-off-white); +} + +.section__header { + text-align: center; + margin-bottom: var(--space-3xl); + max-width: 660px; + margin-left: auto; + margin-right: auto; +} + +.section__badge { + display: inline-block; + padding: 0.35rem 1rem; + font-size: var(--font-size-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-accent-dark); + background-color: rgba(201, 169, 78, 0.12); + border-radius: var(--radius-full); + margin-bottom: var(--space-md); +} + +.section__title { + font-size: var(--font-size-3xl); + font-weight: 800; + color: var(--color-gray-900); + margin-bottom: var(--space-md); + letter-spacing: -0.01em; +} + +.section__subtitle { + font-size: var(--font-size-md); + color: var(--color-gray-600); + line-height: var(--line-height-loose); +} + +/* ============================================================ + Services Grid & Cards + ============================================================ */ +.services__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-xl); +} + +.card--service { + background-color: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-lg); + padding: var(--space-2xl) var(--space-xl); + text-align: center; + transition: all var(--transition-base); + position: relative; + overflow: hidden; +} + +.card--service::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + transform: scaleX(0); + transform-origin: left; + transition: transform var(--transition-base); +} + +.card--service:hover { + transform: translateY(-6px); + box-shadow: var(--shadow-lg); + border-color: transparent; +} + +.card--service:hover::before { + transform: scaleX(1); +} + +.card__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); + color: var(--color-white); + font-size: 1.5rem; + margin-bottom: var(--space-lg); + transition: transform var(--transition-base); +} + +.card--service:hover .card__icon { + transform: scale(1.08); +} + +.card__title { + font-size: var(--font-size-lg); + font-weight: 700; + color: var(--color-gray-900); + margin-bottom: var(--space-sm); +} + +.card__text { + font-size: var(--font-size-sm); + color: var(--color-gray-600); + line-height: var(--line-height-loose); + margin-bottom: var(--space-lg); +} + +.card__link { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: var(--font-size-sm); + font-weight: 600; + color: var(--color-primary); + transition: color var(--transition-fast), gap var(--transition-fast); + text-decoration: none; +} + +.card__link:hover { + color: var(--color-accent-dark); + gap: 0.7rem; +} + +/* ============================================================ + Value Propositions + ============================================================ */ +.values__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-xl); +} + +.value-card { + text-align: center; + padding: var(--space-xl); +} + +.value-card__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 72px; + height: 72px; + border-radius: 50%; + background-color: rgba(201, 169, 78, 0.1); + color: var(--color-accent-dark); + font-size: 1.6rem; + margin-bottom: var(--space-lg); + transition: all var(--transition-base); +} + +.value-card:hover .value-card__icon { + background-color: var(--color-accent); + color: var(--color-white); + transform: scale(1.1); +} + +.value-card__title { + font-size: var(--font-size-md); + font-weight: 700; + color: var(--color-gray-900); + margin-bottom: var(--space-sm); +} + +.value-card__text { + font-size: var(--font-size-sm); + color: var(--color-gray-600); + line-height: var(--line-height-loose); +} + +/* ============================================================ + Testimonials + ============================================================ */ +.testimonials { + background-color: var(--color-off-white); +} + +.testimonials__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--space-xl); +} + +.testimonial-card { + background-color: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-lg); + padding: var(--space-2xl); + transition: all var(--transition-base); + opacity: 0; + transform: translateY(24px); +} + +.testimonial-card.animate-in { + opacity: 1; + transform: translateY(0); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.testimonial-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-gray-300); +} + +.testimonial-card__stars { + display: flex; + gap: 3px; + margin-bottom: var(--space-md); + font-size: var(--font-size-sm); +} + +.testimonial-card__star--active { + color: var(--color-accent); +} + +.testimonial-card__star--inactive { + color: var(--color-gray-300); +} + +.testimonial-card__text { + font-size: var(--font-size-base); + font-style: italic; + color: var(--color-gray-700); + line-height: var(--line-height-loose); + margin-bottom: var(--space-lg); + border: none; + padding: 0; +} + +.testimonial-card__author { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.testimonial-card__avatar { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--color-primary); + color: var(--color-white); + font-size: var(--font-size-sm); + flex-shrink: 0; +} + +.testimonial-card__name { + font-weight: 600; + color: var(--color-gray-900); + font-size: var(--font-size-sm); +} + +/* ============================================================ + Contact Section + ============================================================ */ +.contact__grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-2xl); + align-items: start; +} + +.contact__info { + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +.contact__info-card { + display: flex; + align-items: flex-start; + gap: var(--space-md); + padding: var(--space-lg); + background-color: var(--color-off-white); + border-radius: var(--radius-lg); + transition: all var(--transition-base); +} + +.contact__info-card:hover { + background-color: var(--color-white); + box-shadow: var(--shadow-md); +} + +.contact__info-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: var(--radius-md); + background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); + color: var(--color-white); + font-size: var(--font-size-lg); + flex-shrink: 0; +} + +.contact__info-card h4 { + font-size: var(--font-size-sm); + font-weight: 700; + color: var(--color-gray-900); + margin-bottom: 0.2rem; +} + +.contact__info-card a, +.contact__info-card p { + font-size: var(--font-size-sm); + color: var(--color-gray-600); + transition: color var(--transition-fast); + margin-bottom: 0; +} + +.contact__info-card a:hover { + color: var(--color-primary); +} + +.contact__map { + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-md); + min-height: 350px; + border: 1px solid var(--color-gray-200); +} + +.contact__map iframe { + display: block; +} + +/* ============================================================ + Footer + ============================================================ */ +.footer { + background-color: var(--color-primary-dark); + color: rgba(255, 255, 255, 0.75); + padding: var(--space-3xl) 0 0; +} + +.footer__grid { + display: grid; + grid-template-columns: 1.3fr 1fr 0.8fr; + gap: var(--space-2xl); + padding-bottom: var(--space-2xl); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer__heading { + font-size: var(--font-size-md); + font-weight: 700; + color: var(--color-white); + margin-bottom: var(--space-lg); +} + +.footer__heading i { + color: var(--color-accent); +} + +.footer__heading--mt { + margin-top: var(--space-xl); +} + +.footer__text { + font-size: var(--font-size-sm); + line-height: var(--line-height-loose); + color: rgba(255, 255, 255, 0.65); +} + +.footer__contact-list { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.footer__contact-list li { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: var(--font-size-sm); +} + +.footer__contact-list li i { + width: 18px; + text-align: center; + color: var(--color-accent); + flex-shrink: 0; +} + +.footer__contact-list a { + color: rgba(255, 255, 255, 0.75); + transition: color var(--transition-fast); + text-decoration: none; +} + +.footer__contact-list a:hover { + color: var(--color-accent); +} + +.footer__social { + display: flex; + gap: var(--space-sm); +} + +.footer__social-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.1); + color: var(--color-white); + font-size: var(--font-size-md); + transition: all var(--transition-base); + text-decoration: none; +} + +.footer__social-link:hover { + background-color: var(--color-accent); + color: var(--color-primary-dark); + transform: translateY(-2px); +} + +.footer__bottom { + text-align: center; + padding: var(--space-lg) 0; + font-size: var(--font-size-xs); + color: rgba(255, 255, 255, 0.45); +} + +/* ============================================================ + Forms (for use in service pages and admin) + ============================================================ */ +.form-group { + margin-bottom: var(--space-lg); +} + +.form-label { + display: block; + font-size: var(--font-size-sm); + font-weight: 600; + color: var(--color-gray-800); + margin-bottom: var(--space-xs); +} + +.form-label .required { + color: var(--color-danger); + margin-left: 2px; +} + +.form-control { + width: 100%; + padding: 0.7rem 1rem; + font-size: var(--font-size-base); + color: var(--color-gray-800); + background-color: var(--color-white); + border: 1.5px solid var(--color-gray-300); + border-radius: var(--radius-md); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + outline: none; +} + +.form-control:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12); +} + +.form-control::placeholder { + color: var(--color-gray-500); +} + +textarea.form-control { + resize: vertical; + min-height: 100px; +} + +select.form-control { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 12px; + padding-right: 2.5rem; +} + +.form-error { + font-size: var(--font-size-xs); + color: var(--color-danger); + margin-top: var(--space-xs); +} + +.form-success { + font-size: var(--font-size-sm); + color: var(--color-success); + padding: var(--space-md); + background-color: rgba(40, 167, 69, 0.08); + border-radius: var(--radius-md); + margin-bottom: var(--space-md); +} + +/* ============================================================ + Alerts + ============================================================ */ +.alert { + padding: var(--space-md) var(--space-lg); + border-radius: var(--radius-md); + font-size: var(--font-size-sm); + margin-bottom: var(--space-md); + border: 1px solid transparent; +} + +.alert--success { + background-color: rgba(40, 167, 69, 0.08); + border-color: rgba(40, 167, 69, 0.2); + color: #155724; +} + +.alert--danger { + background-color: rgba(220, 53, 69, 0.08); + border-color: rgba(220, 53, 69, 0.2); + color: #721c24; +} + +.alert--warning { + background-color: rgba(255, 193, 7, 0.1); + border-color: rgba(255, 193, 7, 0.3); + color: #856404; +} + +.alert--info { + background-color: rgba(23, 162, 184, 0.08); + border-color: rgba(23, 162, 184, 0.2); + color: #0c5460; +} + +/* ============================================================ + Scroll Animations + ============================================================ */ +.fade-up { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.fade-up.visible { + opacity: 1; + transform: translateY(0); +} + +/* ============================================================ + Responsive — Tablet (768px) + ============================================================ */ +@media (max-width: 1024px) { + .values__grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer__grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 768px) { + :root { + --navbar-height: 64px; + } + + /* Navbar mobile */ + .navbar__toggle { + display: flex; + } + + .navbar__menu { + position: fixed; + top: 0; + right: -100%; + width: 85%; + max-width: 360px; + height: 100vh; + background-color: var(--color-white); + box-shadow: var(--shadow-xl); + padding: calc(var(--navbar-height) + var(--space-lg)) var(--space-xl) var(--space-xl); + transition: right var(--transition-slow); + overflow-y: auto; + z-index: 999; + } + + .navbar__menu.active { + right: 0; + } + + .navbar__list { + flex-direction: column; + align-items: stretch; + gap: 0; + } + + .navbar__link { + padding: 0.85rem 0; + font-size: var(--font-size-base); + border-bottom: 1px solid var(--color-gray-100); + } + + .navbar__link:hover { + background-color: transparent; + } + + .navbar__dropdown { + position: static; + opacity: 1; + visibility: visible; + transform: none; + box-shadow: none; + border: none; + padding: 0 0 0 var(--space-md); + max-height: 0; + overflow: hidden; + transition: max-height var(--transition-base); + } + + .navbar__item--dropdown.active .navbar__dropdown { + max-height: 400px; + } + + .navbar__dropdown-link { + padding: 0.6rem 0; + border-bottom: 1px solid var(--color-gray-100); + } + + /* Mobile overlay */ + .navbar__overlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 998; + opacity: 0; + visibility: hidden; + transition: all var(--transition-base); + } + + .navbar__overlay.active { + opacity: 1; + visibility: visible; + } + + /* Hero mobile */ + .hero { + min-height: 85vh; + padding: calc(var(--navbar-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl); + } + + .hero__title { + font-size: var(--font-size-2xl); + } + + .hero__subtitle { + font-size: var(--font-size-base); + } + + .hero__actions { + flex-direction: column; + } + + .hero__actions .btn { + width: 100%; + justify-content: center; + } + + /* Sections */ + .section { + padding: var(--space-3xl) 0; + } + + .section__title { + font-size: var(--font-size-2xl); + } + + .section__header { + margin-bottom: var(--space-2xl); + } + + /* Services */ + .services__grid { + grid-template-columns: 1fr; + gap: var(--space-md); + } + + /* Values */ + .values__grid { + grid-template-columns: 1fr; + gap: var(--space-md); + } + + /* Testimonials */ + .testimonials__grid { + grid-template-columns: 1fr; + } + + /* Contact */ + .contact__grid { + grid-template-columns: 1fr; + } + + /* Footer */ + .footer__grid { + grid-template-columns: 1fr; + gap: var(--space-xl); + } +} + +/* ============================================================ + Responsive — Small Mobile (480px) + ============================================================ */ +@media (max-width: 480px) { + .container { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + + .hero__title { + font-size: 1.75rem; + } + + .hero__subtitle { + font-size: var(--font-size-sm); + } + + .section__title { + font-size: var(--font-size-xl); + } + + .card--service { + padding: var(--space-xl) var(--space-lg); + } + + .testimonial-card { + padding: var(--space-xl); + } + + .btn--lg { + padding: 0.75rem 1.5rem; + font-size: var(--font-size-base); + } +} + +/* ============================================================ + Desktop large (1200px+) + ============================================================ */ +@media (min-width: 1200px) { + .hero__title { + font-size: var(--font-size-5xl); + } + + .services__grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* ============================================================ + Print Styles + ============================================================ */ +@media print { + .navbar, + .hero__actions, + .footer__social, + .navbar__toggle { + display: none !important; + } + + .hero { + min-height: auto; + padding: var(--space-xl) 0; + background: none; + color: var(--color-gray-900); + } + + .hero__title, + .hero__subtitle { + color: var(--color-gray-900); + } + + .section { + padding: var(--space-xl) 0; + } + + body { + font-size: 12pt; + } +} + +/* ============================================================ + Accessibility + ============================================================ */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + .testimonial-card { + opacity: 1; + transform: none; + } +} + +:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..d152b9c --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,169 @@ +/** + * Gestoría LP — Main JavaScript + * Handles: mobile menu, smooth scroll, navbar scroll effect, scroll animations + */ + +document.addEventListener('DOMContentLoaded', function () { + + // ---- DOM References ---- + const navbar = document.getElementById('navbar'); + const navToggle = document.getElementById('navToggle'); + const navMenu = document.getElementById('navMenu'); + const body = document.body; + + // Create overlay element for mobile menu backdrop + const overlay = document.createElement('div'); + overlay.classList.add('navbar__overlay'); + document.body.appendChild(overlay); + + // ================================================================ + // 1. Mobile Hamburger Menu Toggle + // ================================================================ + function openMenu() { + navToggle.classList.add('active'); + navMenu.classList.add('active'); + overlay.classList.add('active'); + navToggle.setAttribute('aria-expanded', 'true'); + body.style.overflow = 'hidden'; + } + + function closeMenu() { + navToggle.classList.remove('active'); + navMenu.classList.remove('active'); + overlay.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + body.style.overflow = ''; + } + + if (navToggle) { + navToggle.addEventListener('click', function () { + if (navMenu.classList.contains('active')) { + closeMenu(); + } else { + openMenu(); + } + }); + } + + // Close menu when clicking overlay + overlay.addEventListener('click', closeMenu); + + // Close menu when pressing Escape + document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && navMenu.classList.contains('active')) { + closeMenu(); + } + }); + + // ================================================================ + // 2. Mobile Dropdown Toggle + // ================================================================ + var dropdownItems = document.querySelectorAll('.navbar__item--dropdown'); + dropdownItems.forEach(function (item) { + var link = item.querySelector('.navbar__link--dropdown'); + if (link) { + link.addEventListener('click', function (e) { + // Only toggle on mobile + if (window.innerWidth <= 768) { + e.preventDefault(); + item.classList.toggle('active'); + } + }); + } + }); + + // ================================================================ + // 3. Smooth Scroll for Anchor Links + // ================================================================ + var anchorLinks = document.querySelectorAll('a[href^="#"]'); + anchorLinks.forEach(function (link) { + link.addEventListener('click', function (e) { + var targetId = this.getAttribute('href'); + if (targetId === '#') return; + + var target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + closeMenu(); + + var navHeight = navbar ? navbar.offsetHeight : 0; + var targetPos = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + + window.scrollTo({ + top: targetPos, + behavior: 'smooth' + }); + } + }); + }); + + // ================================================================ + // 4. Navbar Background/Shadow on Scroll + // ================================================================ + var lastScrollY = 0; + + function handleNavbarScroll() { + var scrollY = window.pageYOffset || document.documentElement.scrollTop; + + if (scrollY > 20) { + navbar.classList.add('navbar--scrolled'); + } else { + navbar.classList.remove('navbar--scrolled'); + } + + lastScrollY = scrollY; + } + + if (navbar) { + window.addEventListener('scroll', handleNavbarScroll, { passive: true }); + // Run once on load + handleNavbarScroll(); + } + + // ================================================================ + // 5. Scroll Animations (Testimonials & fade-up elements) + // ================================================================ + function animateOnScroll() { + // Testimonial cards + var testimonialCards = document.querySelectorAll('.testimonial-card:not(.animate-in)'); + testimonialCards.forEach(function (card, index) { + var rect = card.getBoundingClientRect(); + var windowHeight = window.innerHeight; + + if (rect.top < windowHeight * 0.88) { + // Stagger the animation + setTimeout(function () { + card.classList.add('animate-in'); + }, index * 120); + } + }); + + // Generic fade-up elements + var fadeElements = document.querySelectorAll('.fade-up:not(.visible)'); + fadeElements.forEach(function (el) { + var rect = el.getBoundingClientRect(); + var windowHeight = window.innerHeight; + + if (rect.top < windowHeight * 0.88) { + el.classList.add('visible'); + } + }); + } + + window.addEventListener('scroll', animateOnScroll, { passive: true }); + // Run once on load to catch elements already in viewport + animateOnScroll(); + + // ================================================================ + // 6. Close mobile dropdown on window resize to desktop + // ================================================================ + window.addEventListener('resize', function () { + if (window.innerWidth > 768) { + closeMenu(); + dropdownItems.forEach(function (item) { + item.classList.remove('active'); + }); + } + }); + +}); diff --git a/includes/footer.php b/includes/footer.php new file mode 100644 index 0000000..4402836 --- /dev/null +++ b/includes/footer.php @@ -0,0 +1,67 @@ + + + +
+
+
+ +
+

+ Gestoría LP +

+

+ Somos una gestoría profesional especializada en trámites migratorios. + Te acompañamos en cada paso de tu proceso para que obtengas tus documentos + de manera segura, rápida y sin complicaciones. +

+
+ + +
+

Contacto

+ +
+ + +
+

Síguenos

+ +

Horario

+

+ Lunes a Viernes: 9:00 AM — 6:00 PM
+ Sábado: 9:00 AM — 2:00 PM +

+
+
+ +
+

© 2026 Gestoría LP. Todos los derechos reservados.

+
+
+
+ + + + + diff --git a/includes/header.php b/includes/header.php new file mode 100644 index 0000000..ed468b4 --- /dev/null +++ b/includes/header.php @@ -0,0 +1,66 @@ + + + + + + + <?= isset($pageTitle) ? htmlspecialchars($pageTitle) . ' | Gestoría LP' : 'Gestoría LP — Trámites Migratorios Profesionales' ?> + + + + + + + + + + + + + + + + + +
diff --git a/index.php b/index.php new file mode 100644 index 0000000..fb7dcb1 --- /dev/null +++ b/index.php @@ -0,0 +1,282 @@ +query("SELECT nombre_cliente, texto, calificacion FROM testimonios WHERE activo = 1 ORDER BY created_at DESC LIMIT 6"); + $testimonios = $stmt->fetchAll(); +} catch (Exception $e) { + // Database may not be available; we'll show placeholders +} +?> + + +
+
+
+

Tu trámite migratorio, sin complicaciones

+

+ Somos expertos en visa americana, SENTRI, pasaporte y doble nacionalidad. + Te guiamos paso a paso para que obtengas tus documentos con confianza y tranquilidad. +

+
+ + Ver servicios + + + Escríbenos + +
+
+
+ + +
+
+
+ Nuestros Servicios +

Trámites que realizamos

+

Ofrecemos un acompañamiento completo en cada proceso migratorio y documental.

+
+ +
+ $servicio): ?> + + +
+
+
+ + +
+
+
+ Por qué elegirnos +

Tu tranquilidad es nuestra prioridad

+

Más que una gestoría, somos tu aliado en cada trámite.

+
+ +
+
+
+ +
+

Experiencia comprobada

+

+ Años de experiencia resolviendo trámites migratorios con altos índices de éxito. +

+
+ +
+
+ +
+

Atención personalizada

+

+ Cada caso es único. Te brindamos asesoría individual adaptada a tu situación. +

+
+ +
+
+ +
+

Proceso transparente

+

+ Sabrás en todo momento el estado de tu trámite. Sin sorpresas ni costos ocultos. +

+
+ +
+
+ +
+

Resultados garantizados

+

+ Nos comprometemos con tu trámite hasta obtener un resultado favorable. +

+
+
+
+
+ + +
+
+
+ Testimonios +

Lo que dicen nuestros clientes

+

La satisfacción de quienes confían en nosotros es nuestro mejor aval.

+
+ +
+ + +
+
+ + + +
+
+ "" +
+
+
+ +
+ +
+
+ + + +
+
+ + + + + +
+
+ "Excelente servicio. Me ayudaron con mi visa americana desde el formulario hasta la entrevista. Todo salió perfecto." +
+
+
+ +
+ María G. +
+
+ +
+
+ + + + + +
+
+ "Gracias a Gestoría LP obtuve mi SENTRI en tiempo récord. Muy profesionales y atentos en todo momento." +
+
+
+ +
+ Carlos R. +
+
+ +
+
+ + + + + +
+
+ "Renové mi pasaporte sin contratiempos. El equipo fue muy amable y me guió en cada paso del proceso." +
+
+
+ +
+ Ana L. +
+
+ +
+
+
+ + +
+
+
+ Contacto +

Estamos para ayudarte

+

Contáctanos hoy y comienza tu trámite con expertos de tu lado.

+
+ +
+ +
+
+
+ +
+
+

Teléfono

+ (+52) 1 XXX XXX XXXX +
+
+ +
+
+ +
+
+

Correo electrónico

+ contacto@gestorialp.com +
+
+ +
+
+ +
+
+

WhatsApp

+ Enviar mensaje +
+
+ +
+
+ +
+
+

Dirección

+

La Paz, Baja California Sur, México

+
+
+
+ + +
+ +
+
+
+
+ +