Preview de mixed.css
/* MIXED CSS PACK */
/* Template: gmzabogadosyasoc.com/index.html */
/* Template mtime: 2025-10-15 14:11:14 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* Variables CSS Mejoradas */
:root {
--primary: #0a1f3a;
--secondary: #c9a96e;
--accent: #8b0000;
--light: #f8f9fa;
--dark: #121212;
--gray: #6c757d;
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
--radius: 12px;
--gradient: linear-gradient(135deg, var(--primary) 0%, #1a3a5f 100%);
--gradient-gold: linear-gradient(135deg, var(--secondary) 0%, #e0c070 100%);
}
/* Reset y estilos base mejorados */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.7;
color: var(--dark);
background-color: #fff;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
p {
margin-bottom: 1.5rem;
font-weight: 400;
color: #444;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: var(--radius);
font-weight: 600;
text-align: center;
cursor: pointer;
transition: var(--transition);
border: none;
font-size: 1rem;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.7s;
z-index: -1;
}
.btn:hover:before {
left: 100%;
}
.btn-primary {
background: var(--gradient-gold);
color: var(--primary);
box-shadow: var(--shadow);
}
.btn-primary:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.btn-secondary {
background-color: transparent;
color: var(--light);
border: 2px solid rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.btn-whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.section {
padding: 100px 0;
position: relative;
}
.section-title {
text-align: center;
margin-bottom: 60px;
position: relative;
font-size: 2.5rem;
}
.section-title:after {
content: '';
display: block;
width: 100px;
height: 4px;
background: var(--gradient-gold);
margin: 20px auto 0;
border-radius: 2px;
}
.text-center {
text-align: center;
}
/* Animaciones personalizadas */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(201, 169, 110, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(201, 169, 110, 0);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animate-fade-in-left {
animation: fadeInLeft 0.8s ease-out forwards;
}
.animate-fade-in-right {
animation: fadeInRight 0.8s ease-out forwards;
}
.animate-float {
animation: float 5s ease-in-out infinite;
}
/* Navbar Mejorada */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.95);
backdrop-filter: blur(15px);
z-index: 1000;
transition: var(--transition);
padding: 20px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.navbar.scrolled {
padding: 15px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--light);
letter-spacing: 0.5px;
}
.logo-text span {
color: var(--secondary);
}
.nav-menu {
display: flex;
gap: 35px;
}
.nav-link {
color: var(--light);
font-weight: 500;
position: relative;
padding: 5px 0;
font-size: 1.05rem;
}
.nav-link:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-gold);
transition: var(--transition);
}
.nav-link:hover {
color: var(--secondary);
}
.nav-link:hover:after {
width: 100%;
}
.nav-cta {
display: flex;
align-items: center;
gap: 15px;
}
.whatsapp-fixed {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
z-index: 999;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
transition: var(--transition);
animation: pulse 2s infinite;
}
.whatsapp-fixed:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6);
}
.hamburger {
display: none;
cursor: pointer;
background: none;
border: none;
color: var(--light);
font-size: 1.8rem;
z-index: 1001;
}
/* Hero Section Mejorada */
.hero {
background: linear-gradient(135deg, rgba(10, 31, 58, 0.9) 0%, rgba(26, 58, 95, 0.85) 100%), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
color: var(--light);
padding: 200px 0 120px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c9a96e' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.3;
}
.hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero-title {
font-size: 4rem;
margin-bottom: 25px;
line-height: 1.1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: 1.8rem;
margin-bottom: 35px;
font-weight: 400;
opacity: 0.9;
}
.hero-support {
font-size: 1.2rem;
margin-bottom: 50px;
opacity: 0.85;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
justify-content: center;
gap: 25px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.trust-cues {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 15px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.1);
padding: 15px 25px;
border-radius: 50px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-icon {
color: var(--secondary);
font-size: 1.5rem;
}
/* About Section Mejorada */
.about {
background-color: var(--light);
position: relative;
overflow: hidden;
}
.about:before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: var(--gradient-gold);
border-radius: 50%;
opacity: 0.05;
z-index: 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
position: relative;
z-index: 1;
}
.about-text h2 {
color: var(--primary);
font-size: 2.8rem;
}
.about-text p {
margin-bottom: 25px;
font-size: 1.1rem;
}
.about-contact {
margin-top: 40px;
background: white;
padding: 30px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.contact-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.contact-icon {
color: var(--secondary);
width: 20px;
font-size: 1.2rem;
}
.about-image {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-hover);
transform: perspective(1000px) rotateY(-5deg);
transition: var(--transition);
}
.about-image:hover {
transform: perspective(1000px) rotateY(0deg);
}
.about-image:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-gold);
opacity: 0.1;
z-index: 1;
}
/* Services Section Mejorada */
.services {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.services:before {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: var(--gradient);
border-radius: 50%;
opacity: 0.03;
z-index: 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
position: relative;
z-index: 1;
}
.service-card {
background-color: white;
border-radius: var(--radius);
padding: 40px 30px;
box-shadow: var(--shadow);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
border-top: 4px solid transparent;
}
.service-card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.service-card:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-hover);
}
.service-card:hover:before {
transform: scaleX(1);
}
.service-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 25px;
display: inline-block;
padding: 15px;
background: rgba(201, 169, 110, 0.1);
border-radius: 12px;
}
.service-title {
color: var(--primary);
font-size: 1.7rem;
margin-bottom: 20px;
}
.service-list {
margin-top: 20px;
}
.service-list li {
margin-bottom: 12px;
position: relative;
padding-left: 25px;
line-height: 1.6;
}
.service-list li:before {
content: '✓';
color: var(--secondary);
position: absolute;
left: 0;
font-weight: bold;
font-size: 1.1rem;
}
/* Why Us Section Mejorada */
.why-us {
background: var(--gradient);
color: var(--light);
position: relative;
overflow: hidden;
}
.why-us:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.3;
}
.why-us .section-title:after {
background: var(--gradient-gold);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
position: relative;
z-index: 1;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius);
padding: 40px 30px;
text-align: center;
transition: var(--transition);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.feature-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 25px;
display: inline-block;
padding: 15px;
background: rgba(201, 169, 110, 0.1);
border-radius: 50%;
}
.feature-title {
font-size: 1.5rem;
margin-bottom: 20px;
}
/* Gallery Section Mejorada */
.gallery {
background-color: var(--light);
position: relative;
overflow: hidden;
}
.gallery:before {
content: '';
position: absolute;
bottom: -100px;
right: -100px;
width: 300px;
height: 300px;
background: var(--gradient-gold);
border-radius: 50%;
opacity: 0.05;
z-index: 0;
}
.gallery-container {
position: relative;
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.gallery-track {
display: flex;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-slide {
min-width: 350px;
margin: 0 15px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
opacity: 0.7;
transform: scale(0.9);
}
.gallery-slide.active {
opacity: 1;
transform: scale(1);
}
.gallery-slide img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: var(--transition);
}
.gallery-slide:hover img {
transform: scale(1.05);
}
.gallery-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.gallery-btn {
background: var(--gradient);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
border: none;
font-size: 1.2rem;
box-shadow: var(--shadow);
}
.gallery-btn:hover {
background: var(--gradient-gold);
color: var(--primary);
transform: translateY(-5px);
}
.gallery-indicators {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 25px;
}
.gallery-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: var(--transition);
}
.gallery-indicator.active {
background: var(--secondary);
transform: scale(1.2);
}
/* FAQs Section Mejorada */
.faqs {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.faq-container {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background-color: white;
border-radius: var(--radius);
margin-bottom: 20px;
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
box-shadow: var(--shadow-hover);
}
.faq-question {
padding: 25px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
transition: var(--transition);
background: white;
font-size: 1.1rem;
}
.faq-question:hover {
background: rgba(201, 169, 110, 0.05);
}
.faq-question.active {
background: rgba(201, 169, 110, 0.1);
color: var(--primary);
}
.faq-icon {
transition: var(--transition);
color: var(--secondary);
}
.faq-question.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 25px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
background: white;
}
.faq-answer.open {
padding: 0 25px 25px;
max-height: 500px;
}
/* Contact Section Mejorada */
.contact {
background-color: var(--light);
position: relative;
overflow: hidden;
}
.contact:before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: var(--gradient);
border-radius: 50%;
opacity: 0.03;
z-index: 0;
}
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
position: relative;
z-index: 1;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 30px;
}
.contact-item-large {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--transition);
}
.contact-item-large:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.contact-icon-large {
font-size: 1.8rem;
color: var(--secondary);
margin-top: 5px;
}
.contact-text h3 {
margin-bottom: 8px;
color: var(--primary);
}
.contact-form {
background-color: white;
padding: 40px;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--transition);
}
.contact-form:hover {
box-shadow: var(--shadow-hover);
}
.form-group {
margin-bottom: 25px;
}
.form-label {
display: block;
margin-bottom: 10px;
font-weight: 500;
color: var(--primary);
}
.form-control {
width: 100%;
padding: 15px 20px;
border: 1px solid #e0e0e0;
border-radius: var(--radius);
font-family: inherit;
font-size: 1rem;
transition: var(--transition);
background: #f9f9f9;
}
.form-control:focus {
outline: none;
border-color: var(--secondary);
background: white;
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.form-honeypot {
display: none;
}
.form-submit {
width: 100%;
margin-top: 15px;
}
.form-note {
font-size: 0.9rem;
color: var(--gray);
margin-top: 20px;
text-align: center;
}
/* Footer Mejorado */
.footer {
background: var(--dark);
color: var(--light);
padding: 80px 0 40px;
position: relative;
}
.footer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--gradient-gold);
}
.footer-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
}
.footer-logo span {
color: var(--secondary);
}
.footer-about {
margin-bottom: 25px;
line-height: 1.8;
opacity: 0.8;
}
.footer-links h3, .footer-contact h3 {
color: var(--secondary);
margin-bottom: 25px;
font-size: 1.3rem;
position: relative;
padding-bottom: 10px;
}
.footer-links h3:after, .footer-contact h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--gradient-gold);
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links a {
opacity: 0.8;
transition: var(--transition);
display: inline-block;
}
.footer-links a:hover {
opacity: 1;
color: var(--secondary);
transform: translateX(5px);
}
.footer-contact p {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
opacity: 0.8;
}
.footer-contact i {
color: var(--secondary);
width: 20px;
font-size: 1.1rem;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
text-align: center;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
}
/* Responsive Mejorado */
@media (max-width: 1200px) {
.hero-title {
font-size: 3.5rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.5rem;
}
.about-content {
grid-template-columns: 1fr;
}
.about-image {
order: -1;
transform: none;
}
.about-image:hover {
transform: none;
}
.contact-container {
grid-template-columns: 1fr;
}
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background: #000;
flex-direction: column;
align-items: flex-start;
padding: 100px 40px 40px;
transition: var(--transition);
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.nav-menu.active {
right: 0;
}
.nav-cta {
flex-direction: column;
gap: 15px;
margin-top: 30px;
width: 100%;
}
.nav-cta .btn {
width: 100%;
justify-content: center;
}
.hero {
padding: 160px 0 80px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.3rem;
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.trust-cues {
flex-direction: column;
gap: 20px;
}
.trust-item {
width: 100%;
justify-content: center;
}
.services-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
.footer-container {
grid-template-columns: 1fr;
}
.gallery-slide {
min-width: 280px;
}
}
@media (max-width: 576px) {
.section {
padding: 80px 0;
}
.hero {
padding: 140px 0 60px;
}
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.btn {
padding: 14px 25px;
font-size: 0.95rem;
}
.service-card, .feature-card, .contact-item-large {
padding: 30px 20px;
}
.contact-form {
padding: 30px 20px;
}
}
/* NAVBAR COLOR OVERRIDE: set navbar + mobile menu to black */
.navbar{ background: rgba(0,0,0,0.95) !important; }
@media (max-width: 768px){
.nav-menu{ background:#000 !important; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Header logo */
.logo-text{
display:flex;
align-items:center;
gap:.55rem;
line-height:1;
white-space:nowrap; /* evita salto raro en el header */
}
.logo-text .brand-mark{
height:30px; /* ajustá a tu navbar */
width:auto;
object-fit:contain;
display:block;
}
.logo-text span{
font-weight:700;
letter-spacing:.4px;
font-size:1.05rem;
color:inherit;
}
/* Opcional si el header es oscuro y el logo es oscuro: */
/* .header-dark .logo-text .brand-mark{ filter: brightness(0) invert(1); } */
:root{
--accent:#c5a15d; /* cambiá si querés otro acento */
--hero-min-h:78vh; /* altura mínima del hero */
}
.hero-pro{
position:relative; min-height:var(--hero-min-h);
display:grid; place-items:center;
padding:96px 0 88px; isolation:isolate; color:#fff; overflow:hidden;
background:#0f0f0f; /* fallback si no carga la imagen */
}
/* Imagen de fondo (1 sola) */
.hero-pro .hero-img{
position:absolute; inset:-8% -8% -8% -8%; z-index:-2; display:block;
}
.hero-pro .hero-img img{
width:100%; height:100%;
object-fit:cover; object-position:center center; /* ajustá foco si querés */
filter: saturate(.9) contrast(1.05) brightness(.8);
transform: scale(1.04);
}
/* Overlay para legibilidad */
.hero-pro .hero-overlay{
position:absolute; inset:0; z-index:-1;
background:
linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.58) 100%),
radial-gradient(120% 90% at 10% 0%, rgba(0,0,0,.35), transparent 60%),
radial-gradient(90% 70% at 90% 100%, rgba(0,0,0,.35), transparent 60%);
mix-blend-mode: multiply;
}
.hero-pro .hero-content{ text-align:center; max-width:980px; }
.hero-pro .hero-title{
font-weight:900; line-height:1.08; letter-spacing:-.02em; margin:0 0 10px;
font-size: clamp(2rem, 3.8vw, 3.2rem);
position:relative; display:inline-block;
text-wrap:balance;
text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.hero-pro .title-underline{
position:absolute; left:8px; right:8px; bottom:-10px; height:4px; border-radius:999px;
background: linear-gradient(90deg, rgba(255,255,255,0), var(--accent), rgba(255,255,255,0));
transform:scaleX(0); transform-origin:left; animation: underline-in .7s .25s forwards;
}
@keyframes underline-in{ to{ transform:scaleX(1);} }
.hero-pro .hero-subtitle{
margin:18px auto 6px; font-size: clamp(1.05rem, 2.2vw, 1.25rem);
color: rgba(255,255,255,.92);
}
.hero-pro .hero-support{
margin:0 auto 22px; color: rgba(255,255,255,.8); max-width:760px;
}
.hero-pro .hero-cta{
display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:10px;
}
.hero-pro .btn{ font-weight:700; padding:12px 16px; border-radius:14px; border:1px solid transparent; }
.hero-pro .btn-accent{ background:var(--accent); color:#111; border-color:var(--accent); }
.hero-pro .btn-accent:hover{ opacity:.92; color:#111; }
.hero-pro .btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.hero-pro .btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.hero-pro .btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:transparent; }
.hero-pro .btn-ghost:hover{ background:rgba(255,255,255,.14); }
.hero-pro .hero-trust{
display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
margin:26px auto 0; padding-top:16px;
border-top:1px solid rgba(255,255,255,.22);
}
.hero-pro .hero-trust li{
list-style:none; display:flex; gap:8px; align-items:center;
padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
background: rgba(0,0,0,.18); backdrop-filter: blur(4px);
font-size:.95rem; color:#fff;
}
.hero-pro .hero-trust i{ color:var(--accent); }
/* Marco sutil */
.hero-pro .hero-frame{
position:absolute; inset:18px; border-radius:26px; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 2px rgba(0,0,0,.2);
mix-blend-mode: screen;
}
/* Indicador de scroll */
.hero-pro .scroll-cue{
position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
width:36px; height:54px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
background: transparent; display:grid; place-items:center; opacity:.9;
}
.hero-pro .scroll-cue:hover{ border-color:#fff; }
.hero-pro .scroll-cue span{
width:6px; height:10px; border-radius:6px; background:#fff; display:block;
animation: cue .9s infinite ease-in-out;
}
@keyframes cue{ 0%{ transform: translateY(-6px); opacity:.3;} 50%{opacity:1;} 100%{ transform: translateY(6px); opacity:.3;} }
/* Responsive */
@media (max-width: 576px){
.hero-pro{ min-height: 82vh; padding:84px 0 96px; }
.hero-pro .hero-trust{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
.hero-pro .title-underline, .hero-pro .scroll-cue span{ animation:none; transform:none; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ====== ABOUT (QUÉNES SOMOS) ====== */
.section.about { padding: clamp(40px, 6vw, 80px) 0; }
.about .container{
/* asegura un ancho razonable y evita “estirar” la grilla */
max-width: 1180px;
}
.about-content{
display: grid;
/* texto flexible + columna de imagen acotada */
grid-template-columns: minmax(0,1fr) min(460px, 34vw);
align-items: center;
gap: clamp(20px, 4vw, 56px);
}
.about-text{ min-width: 0; } /* evita overflow de títulos/líneas largas */
.about-image{
justify-self: end;
width: 100%;
max-width: min(460px, 34vw);
/* tarjeta para la imagen */
background: #faf7ef;
border-radius: 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.12);
padding: clamp(6px, 1.2vw, 12px);
overflow: hidden; /* clave para que no se “salga” del contenedor */
}
.about-image img{
display: block;
width: 100%;
height: auto; /* mantiene proporción real del logo */
max-width: 100%;
border-radius: 14px;
}
/* tipografía y listita de contacto */
.about .section-title{ margin-bottom: .35em; }
.about-contact{
margin-top: 18px;
display: grid;
gap: 10px;
}
.about-contact .contact-item{
display: grid;
grid-template-columns: 22px 1fr;
align-items: start;
gap: 10px;
font-size: 0.98rem;
line-height: 1.35rem;
word-break: break-word; /* por si algún dato es largo */
}
.contact-icon{ margin-top: 2px; opacity: .9; }
/* Responsive: stack en mobile/tablet */
@media (max-width: 992px){
.about-content{
grid-template-columns: 1fr;
}
.about-image{
justify-self: center;
max-width: 520px;
}
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* ==== Why Us Pro (clean + animaciones) ==== */
:root{
--accent:#c5a15d; /* acento (cambiable) */
--ink:#121212; /* texto */
--muted:#6f6f6f; /* texto secundario */
--line:#e9e9e9; /* bordes suaves */
--card:#ffffff; /* fondo card */
--bg:#fafafa; /* fondo sección */
--radius:16px;
--shadow:0 6px 24px rgba(0,0,0,.08);
--t:.25s cubic-bezier(.2,.7,.2,1);
}
.why-us-pro{
position:relative; overflow:hidden;
background: var(--bg);
padding-top:64px; padding-bottom:72px;
color:var(--ink);
}
.wu3-head{ text-align:center; margin-bottom:26px; }
.wu3-title{
position:relative; display:inline-block; margin:0;
font-weight:800; letter-spacing:-.02em;
}
.wu3-underline{
position:absolute; left:8px; right:8px; bottom:-8px; height:4px;
background: linear-gradient(90deg, rgba(0,0,0,0), var(--accent), rgba(0,0,0,0));
border-radius:999px; transform:scaleX(0); transform-origin:left; animation: underline-in .6s .25s forwards;
}
@keyframes underline-in{ to{ transform:scaleX(1);} }
.wu3-sub{ color:var(--muted); margin:14px auto 0; max-width:720px; }
.wu3-grid{
display:grid; gap:18px; margin-top:28px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .wu3-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 576px){ .wu3-grid{ grid-template-columns:1fr; } }
.wu3-card{
position:relative; background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); padding:22px 18px 20px; box-shadow:var(--shadow);
transform: translateY(14px) scale(.98); opacity:0;
transition: transform var(--t), box-shadow var(--t), border-color var(--t), opacity var(--t);
}
.wu3-card.in{ transform: translateY(0) scale(1); opacity:1; }
.wu3-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.12); border-color:#dcdcdc; }
.wu3-icon{
width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
/* anillo con acento y glow sutil */
background:
radial-gradient(120% 120% at 30% 20%, rgba(197,161,93,.16), transparent 60%),
#fff;
border:1px solid #eee;
box-shadow: inset 0 0 0 2px rgba(197,161,93,.25), 0 4px 16px rgba(197,161,93,.12);
margin-bottom:12px;
transition: transform var(--t), box-shadow var(--t);
}
.wu3-card:hover .wu3-icon{ transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 2px rgba(197,161,93,.35), 0 6px 22px rgba(197,161,93,.18); }
.wu3-icon i{
font-size:1.35rem; color:var(--accent); /* ¡no negro! */
filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.wu3-card h3{ font-size:1.05rem; margin:4px 0 6px; font-weight:800; letter-spacing:.2px; }
.wu3-card p{ color:var(--muted); margin:0; line-height:1.55; }
/* barra de confianza */
.wu3-trust{
margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:12px; justify-content:center; color:var(--muted);
}
.wu3-trust i{ color:var(--accent); margin-right:6px; }
.wu3-trust .dot{ width:6px; height:6px; border-radius:50%; background:#d6d6d6; align-self:center; }
/* botón acento */
.wu3-btn-accent{
background: var(--accent); border-color: var(--accent); color:#111; font-weight:700;
padding-inline:18px;
}
.wu3-btn-accent:hover{ opacity:.92; color:#111; }
/* fondo decorativo sutil (sin recargar) */
.wu3-bg{
position:absolute; inset:auto -10% -20% -10%; height:46%;
background:
radial-gradient(60% 60% at 20% 40%, rgba(197,161,93,.10) 0, transparent 70%),
radial-gradient(70% 70% at 80% 10%, rgba(0,0,0,.035) 0, transparent 75%);
pointer-events:none;
}
/* entrada escalonada */
.wu3-card{ --delay: 0ms; }
.wu3-card:nth-child(1){ --delay: 40ms; }
.wu3-card:nth-child(2){ --delay: 80ms; }
.wu3-card:nth-child(3){ --delay: 120ms; }
.wu3-card:nth-child(4){ --delay: 160ms; }
.wu3-card:nth-child(5){ --delay: 200ms; }
.wu3-card:nth-child(6){ --delay: 240ms; }
.wu3-card.in{ transition-delay: var(--delay); }
/* ==== Marco sutil de la sección ==== */
:root{
--accent:#c5a15d; /* tu acento actual */
}
.why-us-pro{
background: #fafafa; /* ya lo tenías */
padding-top: 72px; padding-bottom: 80px;
}
.wu3-frame{
--r: 22px;
position: relative;
max-width: 1200px;
margin: 0 auto;
border-radius: var(--r);
/* “borde de doble capa” ultra sutil con background-clip */
background:
linear-gradient(#ffffff,#ffffff) padding-box,
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.02)) border-box;
border: 1px solid transparent;
/* luz muy discreta, nada burdo */
box-shadow:
0 10px 28px rgba(0,0,0,.06),
0 1px 0 rgba(255,255,255,.7) inset;
padding: 28px 22px;
}
/* Una línea interior hiper-fina para darle “profundidad” */
.wu3-frame::after{
content:"";
position:absolute; inset: 10px;
border-radius: calc(var(--r) - 10px);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
pointer-events:none;
}
/* micro detalle: subrayado del título toma el acento pero más suave */
.wu3-title .wu3-underline{
background: linear-gradient(90deg, rgba(0,0,0,0), color-mix(in oklab, var(--accent) 70%, #fff), rgba(0,0,0,0));
}
/* iconos ya tenían color de acento; bajamos un toque la saturación al hover del card */
.wu3-card:hover .wu3-icon{
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 40%, #fff), 0 6px 22px rgba(0,0,0,.12);
}
/* responsive: respiración sin perder el marco */
@media (max-width: 992px){
.wu3-frame{ padding: 22px 16px; }
}
@media (max-width: 576px){
.wu3-frame{ padding: 18px 12px; }
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* Footer logo */
.footer-logo{
display:flex;
align-items:center;
gap:.6rem;
line-height:1;
}
.footer-logo .brand-mark{
height:28px; /* ajustá si querés más grande */
width:auto;
object-fit:contain;
display:block;
}
/* Tipografía de “Abogados” */
.footer-logo span{
font-weight:700;
letter-spacing:.4px;
font-size:1.05rem;
color:inherit; /* usa el color del footer */
}
/* Opcional: si tu footer es oscuro y el logo es negro, descomentá: */
/* .footer.is-dark .brand-mark{ filter: brightness(0) invert(1); } */