HERO BANNER === */
.cep-hero {
width: 100%;
min-height: 420px;
background-image: url('https://images.unsplash.com/photo-1601758125946-6ec2ef64daf8?w=1400&q=85&auto=format&fit=crop');
background-size: cover;
background-position: center 30%;
display: flex;
align-items: center;
position: relative;
margin-bottom: 0;
}
.cep-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15,30,50,0.82) 0%, rgba(15,30,50,0.55) 55%, rgba(15,30,50,0.1) 100%);
}
.cep-hero-content {
position: relative;
z-index: 1;
max-width: 600px;
padding: 60px 48px;
}
.cep-hero-tag {
display: inline-block;
background: rgba(246,134,32,0.9);
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
letter-spacing: 0.03em;
margin-bottom: 18px;
font-family: Inter, sans-serif;
}
.cep-hero-title {
font-family: Poppins, sans-serif;
font-size: clamp(26px, 3.5vw, 44px);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin: 0 0 16px;
}
.cep-hero-sub {
font-family: Inter, sans-serif;
font-size: 16px;
color: rgba(255,255,255,0.85);
line-height: 1.6;
margin: 0 0 28px;
max-width: 480px;
}
.cep-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cep-hero-btn-primary {
display: inline-flex;
align-items: center;
background: #F68620;
color: #fff;
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 700;
padding: 13px 28px;
border-radius: 30px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 16px rgba(246,134,32,0.4);
}
.cep-hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(246,134,32,0.5); }
.cep-hero-btn-secondary {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.15);
color: #fff;
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 600;
padding: 13px 28px;
border-radius: 30px;
text-decoration: none;
border: 1.5px solid rgba(255,255,255,0.5);
backdrop-filter: blur(4px);
transition: background 0.2s;
}
.cep-hero-btn-secondary:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 600px) {
.cep-hero { min-height: 320px; }
.cep-hero-content { padding: 40px 24px; }
.cep-hero-title { font-size: 26px; }
}
/* === FOTOS EN TARJETAS DE CATEGORÍAS === */
/* Perros */
.cep-cats-grid a:nth-child(1) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1587500003388-59208cc962cb?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center !important;
position: relative;
}
.cep-cats-grid a:nth-child(1) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(246,134,32,0.55), rgba(246,134,32,0.25));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(1) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Gatos */
.cep-cats-grid a:nth-child(2) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center !important;
position: relative;
}
.cep-cats-grid a:nth-child(2) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(66,188,180,0.55), rgba(66,188,180,0.25));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(2) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Exóticos */
.cep-cats-grid a:nth-child(3) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center !important;
position: relative;
}
.cep-cats-grid a:nth-child(3) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(246,186,32,0.55), rgba(246,186,32,0.25));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(3) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Farmacia */
.cep-cats-grid a:nth-child(4) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1532375810709-75b1da00537c?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center top !important;
position: relative;
}
.cep-cats-grid a:nth-child(4) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(66,188,180,0.55), rgba(66,188,180,0.25));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(4) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Higiene */
.cep-cats-grid a:nth-child(5) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center !important;
position: relative;
}
.cep-cats-grid a:nth-child(5) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(246,134,32,0.5), rgba(246,134,32,0.2));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(5) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Outlet */
.cep-cats-grid a:nth-child(6) .cep-cat-icon {
background-image: url('https://images.unsplash.com/photo-1601758124510-52d02ddb7cbd?w=400&q=80&auto=format&fit=crop') !important;
background-size: cover !important;
background-position: center !important;
position: relative;
}
.cep-cats-grid a:nth-child(6) .cep-cat-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(246,134,32,0.5), rgba(246,186,32,0.25));
border-radius: inherit;
}
.cep-cats-grid a:nth-child(6) .cep-cat-icon svg { position: relative; z-index: 1; }
/* Hover mejorado en tarjetas */
.cep-cat:hover .cep-cat-icon {
transform: scale(1.04);
transition: transform 0.3s ease;
}
.cep-cat-icon { overflow: hidden; transition: transform 0.3s ease; }
🐾 Envío rápido a Santiago
Todo para tu mascota,
en un solo lugar
Alimentos premium, farmacia veterinaria y accesorios para perros, gatos y exóticos. 3 sucursales en Providencia y Las Condes.
