Preview de mixed.css
/* MIXED CSS PACK */
/* Template: cateringbenitez.com.ar/index.html */
/* Template mtime: 2025-08-19 13:57:03 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css */
/* external link (no embedded): https://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--negro: #0B0B0B;
--negro-2: #121212;
--crema: #F6EBDD;
--crema-2: #E8DBC5;
--blanco: #FFFFFF;
--azul: #0D1B2A;
--azul-2: #1B263B;
--dorado: #C8A047;
--dorado-2: #D4B15F;
--dorado-3: #E3C477;
--dorado-claro: rgba(200, 160, 71, 0.1);
--acento: #1F6FEB;
--ticker-img-size: 500px;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Montserrat', sans-serif;
}
html, body {
background: var(--negro);
color: var(--blanco);
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-sans);
line-height: 1.6;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 0.5px;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--dorado);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--negro-2);
}
::-webkit-scrollbar-thumb {
background: var(--dorado);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dorado-2);
}
/* Navbar - Premium */
.navbar {
background: rgba(13, 27, 42, 0.98) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 160, 71, 0.3);
padding: 15px 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.scrolled {
padding: 10px 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.brand-mark {
font-family: var(--font-serif);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: 0.5px;
position: relative;
}
.brand-dot {
color: var(--dorado);
}
.nav-link {
font-weight: 600;
padding: 0.5rem 1rem;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
width: 0;
height: 2px;
background: var(--dorado);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: calc(100% - 2rem);
}
.btn-cta {
background: linear-gradient(45deg, var(--dorado), var(--dorado-3));
color: var(--negro);
border: none;
font-weight: 700;
padding: 0.8rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(200, 160, 71, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--dorado-2), var(--dorado-3));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(200, 160, 71, 0.4);
color: var(--negro);
}
.btn-cta:hover::before {
opacity: 1;
}
/* Hero Section - Ultra Premium */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 80px;
background:
radial-gradient(1200px 600px at 20% -10%, rgba(200, 160, 71, 0.15), transparent 60%),
radial-gradient(1200px 600px at 120% 110%, rgba(31, 111, 235, 0.12), transparent 60%),
linear-gradient(180deg, rgba(13, 27, 42, 0.9), rgba(11, 11, 11, 0.98));
}
.hero::before {
content: "";
position: absolute;
inset: -20% -10% auto auto;
width: 60vmax;
height: 60vmax;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(248, 240, 227, 0.15), transparent 40%);
filter: blur(60px);
opacity: 0.6;
pointer-events: none;
animation: float 8s ease-in-out infinite;
}
.hero::after {
content: "";
position: absolute;
inset: 30% -30% auto auto;
width: 40vmax;
height: 40vmax;
border-radius: 50%;
background: radial-gradient(circle at 70% 30%, rgba(31, 111, 235, 0.1), transparent 50%);
filter: blur(40px);
opacity: 0.4;
pointer-events: none;
animation: float 6s ease-in-out 2s infinite reverse;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.hero h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100px;
height: 4px;
background: var(--dorado);
border-radius: 2px;
}
.hero p.lead {
color: var(--crema-2);
font-size: 1.2rem;
max-width: 600px;
margin-bottom: 2rem;
}
.badge-pill {
background: rgba(200, 160, 71, 0.2);
color: var(--crema);
border: 1px solid rgba(200, 160, 71, 0.4);
border-radius: 2rem;
padding: 0.5rem 1rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.badge-pill:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: rgba(200, 160, 71, 0.3);
}
.badge-pill i {
margin-right: 0.3rem;
font-size: 0.9rem;
}
.hero-ctas .btn {
padding: 1rem 1.8rem;
border-radius: 12px;
font-weight: 700;
transition: all 0.3s ease;
}
.hero-ctas .btn-light {
background: rgba(255, 255, 255, 0.9);
color: var(--negro);
border: none;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.hero-ctas .btn-light:hover {
background: var(--blanco);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
.hero-image-container {
position: relative;
perspective: 1000px;
}
.hero-image {
border-radius: 20px;
transform-style: preserve-3d;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.4);
transition: transform 0.5s ease;
border: 2px solid rgba(200, 160, 71, 0.3);
}
.hero-image-container:hover .hero-image {
transform: rotateY(5deg) rotateX(2deg) translateY(-5px);
}
.hero-image-container::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 100%;
height: 100%;
border: 2px solid var(--dorado);
border-radius: 20px;
z-index: -1;
opacity: 0.5;
transition: all 0.5s ease;
}
.hero-image-container:hover::before {
top: -15px;
left: -15px;
}
/* Section Styles */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-weight: 800;
letter-spacing: 0.5px;
position: relative;
display: inline-block;
margin-bottom: 1.5rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: var(--dorado);
border-radius: 2px;
}
.section-sub {
color: var(--crema-2);
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
}
.section-dark {
background: linear-gradient(180deg, var(--negro-2), var(--negro));
}
.section-light {
background: linear-gradient(180deg, var(--azul), var(--azul-2));
}
/* Cards - Premium Design */
.card-elite {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(200, 160, 71, 0.3);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
overflow: hidden;
position: relative;
z-index: 1;
}
.card-elite::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(200, 160, 71, 0.05), transparent);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.card-elite:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
border-color: rgba(200, 160, 71, 0.5);
}
.card-elite:hover::before {
opacity: 1;
}
.card-elite .icon {
font-size: 1.8rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(31, 111, 235, 0.15);
border: 1px solid rgba(31, 111, 235, 0.4);
color: #bcd4ff;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.card-elite:hover .icon {
transform: rotate(15deg) scale(1.1);
background: rgba(200, 160, 71, 0.2);
border-color: rgba(200, 160, 71, 0.6);
color: var(--dorado);
}
/* Servicios grid */
.service-item h5 {
font-weight: 700;
margin-bottom: 1rem;
font-family: var(--font-serif);
color: var(--crema);
}
.service-item p {
color: var(--crema-2);
}
.service-item:hover h5 {
color: var(--dorado);
}
/* Por qué elegirnos */
.why-list i {
color: var(--dorado);
margin-right: 0.8rem;
font-size: 1.2rem;
min-width: 24px;
text-align: center;
}
.why-list h6 {
font-weight: 700;
color: var(--crema);
margin-bottom: 0.3rem;
}
.why-list p {
color: var(--crema-2);
}
/* Ticker (trabajos) - Premium Carousel */
.ticker-wrap {
position: relative;
padding: 20px 0;
}
.ticker-track {
display: flex;
gap: 2rem;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
padding: 2rem 0;
scroll-padding: 0 2rem;
}
.ticker-track::-webkit-scrollbar {
display: none;
}
.ticker-card {
min-width: var(--ticker-img-size);
max-width: var(--ticker-img-size);
scroll-snap-align: center;
position: relative;
transition: all 0.4s ease;
}
.ticker-card:hover {
transform: scale(1.02);
}
.ticker-photo {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 20px;
border: 1px solid rgba(200, 160, 71, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
}
.ticker-card:hover .ticker-photo {
border-color: rgba(200, 160, 71, 0.6);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.ticker-caption {
font-weight: 700;
margin-top: 1rem;
color: var(--crema);
font-family: var(--font-serif);
}
.ticker-sub {
color: var(--crema-2);
font-size: 0.95rem;
}
.ticker-btn {
position: absolute;
top: calc(50% - 2rem);
width: 4rem;
height: 4rem;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(13, 27, 42, 0.8);
border: 1px solid rgba(200, 160, 71, 0.4);
color: #fff;
z-index: 3;
transition: all 0.3s ease;
opacity: 0.8;
}
.ticker-btn:hover {
background: rgba(13, 27, 42, 0.95);
transform: scale(1.1);
opacity: 1;
border-color: var(--dorado);
}
.ticker-prev {
left: -1rem;
}
.ticker-next {
right: -1rem;
}
/* Contacto */
.contact-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(200, 160, 71, 0.25);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
}
.contact-card:hover {
border-color: rgba(200, 160, 71, 0.4);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.form-control, .form-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(200, 160, 71, 0.3);
color: #fff;
padding: 0.8rem 1rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.form-control::placeholder {
color: #c9c9c9;
}
.form-control:focus, .form-select:focus {
border-color: var(--dorado);
box-shadow: 0 0 0 0.25rem rgba(200, 160, 71, 0.25);
background: rgba(255, 255, 255, 0.08);
}
textarea.form-control {
min-height: 150px;
}
.contact-info-card {
position: relative;
overflow: hidden;
}
.contact-info-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(200, 160, 71, 0.05), transparent 70%);
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.contact-info-card:hover::before {
opacity: 1;
}
/* Footer */
footer {
border-top: 1px solid rgba(200, 160, 71, 0.3);
background: var(--azul);
padding: 3rem 0;
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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='%23c8a047' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
z-index: 0;
}
.footer-content {
position: relative;
z-index: 1;
}
/* Floating socials */
.float-socials {
position: fixed;
right: 30px;
bottom: 30px;
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 999;
}
.float-btn {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
border: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.float-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.float-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.float-btn:hover::before {
opacity: 1;
}
.float-wa {
background: #25D366;
animation: pulse 2s infinite;
}
.float-ig {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
/* Helpers */
.muted {
color: #b9bec4;
}
.chip {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 999px;
border: 1px solid rgba(200, 160, 71, 0.4);
color: var(--crema);
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.chip:hover {
background: rgba(200, 160, 71, 0.2);
transform: translateY(-2px);
}
.text-gold {
color: var(--dorado);
}
.bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
pointer-events: none;
background-image: 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='%23c8a047' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Animations */
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeInUp {
animation: fadeInUp 1s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.section {
padding: 80px 0;
}
.hero h1 {
font-size: clamp(2.2rem, 6vw + 1rem, 3.5rem);
}
.hero p.lead {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.section {
padding: 60px 0;
}
.hero {
padding-top: 100px;
text-align: center;
}
.hero h1::after {
left: 50%;
transform: translateX(-50%);
}
.hero-ctas {
justify-content: center;
}
.ticker-btn {
width: 3rem;
height: 3rem;
}
.ticker-prev {
left: 0;
}
.ticker-next {
right: 0;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2.5rem;
}
.badge-pill {
display: block;
width: fit-content;
margin: 0 auto 0.5rem;
}
.float-socials {
right: 15px;
bottom: 15px;
}
.float-btn {
width: 3rem;
height: 3rem;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Ajusta el ancho de cada campo en desktop */
@media (min-width: 992px) {
.contact-card .form-control,
.contact-card .form-select,
.contact-card textarea {
min-width: 220px;
}
.contact-card .form-label {
white-space: nowrap;
}
.contact-card .form-group {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .5rem;
}
}