Preview de mixed.css
/* MIXED CSS PACK */
/* Template: decorservice.com/index.html */
/* Template mtime: 2026-02-20 22:36:04 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],400;14..32,600;14..32,700;14..32,800;14..32,900&display=swap */
/* external link (no embedded): https://unpkg.com/[email protected]/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ---------------------------------------------------------- */
/* ROOT - GAMA DE COLORES RESPETADA AL 100% */
/* ---------------------------------------------------------- */
:root {
--accent: #1392e3; /* Tu color principal */
--accent-dim: rgba(19, 146, 227, 0.15);
--accent-glow: rgba(19, 146, 227, 0.4);
--text-primary: #0f172a; /* Texto más profundo */
--text-muted: #475569; /* Gris más elegante */
--bg-soft: #f8fafc; /* Fondo suave general */
--border-light: rgba(15, 23, 42, 0.08);
--border-soft: rgba(15, 23, 42, 0.12);
--card-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.07), 0 5px 15px -5px rgba(0, 0, 0, 0.03);
--card-shadow-hover: 0 30px 50px -15px rgba(19, 146, 227, 0.25);
--radius-lg: 28px;
--radius-md: 22px;
--radius-sm: 16px;
--transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ---------------------------------------------------------- */
/* GLOBAL - RESET Y ESTILOS BASE PREMIUM */
/* ---------------------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Inter", system-ui, -apple-system, sans-serif;
color: var(--text-primary);
background: #ffffff;
line-height: 1.5;
overflow-x: hidden;
padding-top: 85px; /* Ajustado para navbar más elegante */
}
/* Tipografía refinada */
h1, h2, h3, h4, .display-premium {
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
/* ---------------------------------------------------------- */
/* COMPONENTES REUTILIZABLES DE LUJO */
/* ---------------------------------------------------------- */
.section {
padding: 110px 0;
position: relative;
}
.section-bg-soft {
background: var(--bg-soft);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1.2rem;
background: #ffffff;
border: 1px solid var(--border-light);
border-radius: 100px;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
margin-bottom: 1.5rem;
}
.eyebrow i {
font-size: 1.1rem;
}
.section-title {
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 900;
color: var(--text-primary);
margin-bottom: 1.2rem;
line-height: 1.1;
}
.section-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
/* Botones ultra premium */
.btn-premium {
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s var(--transition-bounce);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
box-shadow: 0 10px 20px -8px rgba(19, 146, 227, 0.3);
letter-spacing: -0.01em;
}
.btn-premium-primary {
background: var(--accent);
color: white;
}
.btn-premium-primary:hover {
background: #0f7bc0; /* Ligeramente más oscuro */
color: white;
transform: translateY(-4px);
box-shadow: 0 20px 30px -8px var(--accent-glow);
}
.btn-premium-outline {
background: transparent;
color: var(--text-primary);
border: 2px solid var(--border-soft);
box-shadow: none;
}
.btn-premium-outline:hover {
border-color: var(--accent);
background: var(--accent-dim);
color: var(--accent);
transform: translateY(-2px);
}
/* Cards de diseño */
.card-premium {
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 2rem 1.8rem;
height: 100%;
transition: all 0.35s ease;
box-shadow: var(--card-shadow);
}
.card-premium:hover {
transform: translateY(-12px);
border-color: var(--accent-dim);
box-shadow: var(--card-shadow-hover);
}
.icon-premium {
width: 60px;
height: 60px;
background: var(--accent-dim);
border: 1px solid rgba(19, 146, 227, 0.25);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.8rem;
transition: all 0.3s ease;
color: var(--accent);
font-size: 26px;
}
.card-premium:hover .icon-premium {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.card-premium h3 {
font-size: 1.6rem;
font-weight: 800;
margin-bottom: 0.8rem;
}
.card-premium p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}
/* Divisor suave */
.divider-soft {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(15,23,42,0.1), transparent);
margin: 1.5rem 0;
}
/* ---------------------------------------------------------- */
/* NAVBAR - PULIDA Y ELEGANTE */
/* ---------------------------------------------------------- */
.navbar {
background: rgba(255, 255, 255, 0.80);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border-light);
padding: 15px 0;
transition: all 0.3s;
}
.navbar .navbar-brand {
font-weight: 900;
font-size: 1.8rem;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.navbar-brand span.dot {
display: inline-block;
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 100px;
margin-right: 8px;
box-shadow: 0 0 0 4px rgba(19, 146, 227, 0.2);
}
.brand-icon{
display:inline-block;
object-fit:contain;
flex:0 0 auto;
border-radius: 6px;
}
.navbar-nav .nav-link {
color: var(--text-primary);
font-weight: 600;
font-size: 1rem;
padding: 0.6rem 1rem !important;
border-radius: 60px;
transition: all 0.2s;
}
.navbar-nav .nav-link:hover {
background: var(--accent-dim);
color: var(--accent);
}
/* ---------------------------------------------------------- */
/* HERO - IMPACTANTE */
/* ---------------------------------------------------------- */
.hero {
padding: 20px 0 80px;
}
.hero-card {
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: var(--card-shadow);
}
.hero h1 {
font-size: clamp(2.8rem, 6vw, 4rem);
font-weight: 900;
line-height: 1.05;
margin: 1.2rem 0 1.2rem;
}
.hero-highlight {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 4px;
text-underline-offset: 8px;
}
.hero-list {
list-style: none;
padding: 0;
margin: 2rem 0;
}
.hero-list li {
display: flex;
gap: 1rem;
align-items: center;
font-size: 1.15rem;
font-weight: 500;
margin-bottom: 1rem;
}
.hero-list li i {
color: var(--accent);
font-size: 1.5rem;
background: var(--accent-dim);
padding: 6px;
border-radius: 50%;
}
.hero-media {
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow: hidden;
background: linear-gradient(145deg, #f1f5f9, #ffffff);
box-shadow: var(--card-shadow);
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: white;
border-radius: 60px;
padding: 0.8rem 1.5rem;
border: 1px solid var(--border-light);
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15);
font-size: 1rem;
}
.hero-badge i {
color: var(--accent);
font-size: 1.4rem;
}
/* ---------------------------------------------------------- */
/* GALERÍA - ÉPICA */
/* ---------------------------------------------------------- */
.gal-gallery {
background: var(--bg-soft);
}
.gal-frame {
height: clamp(300px, 55vh, 520px);
background: white;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--card-shadow);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid var(--border-light);
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
border-radius: 12px;
transition: transform 0.4s;
}
.gal-img:hover {
transform: scale(1.02);
}
/* Controles de carrusel circulares */
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
width: 56px;
height: 56px;
background: white;
border-radius: 100px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
border: 1px solid var(--border-light);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
margin: 0 15px;
}
.gal-gallery .carousel-control-prev-icon,
.gal-gallery .carousel-control-next-icon {
filter: brightness(0) saturate(100%) invert(34%) sepia(98%) saturate(1235%) hue-rotate(180deg) brightness(92%) contrast(90%);
}
/* Indicadores */
.gal-gallery .carousel-indicators {
bottom: -60px;
}
.gal-gallery .carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 100px;
background: var(--text-muted);
border: none;
transition: 0.2s;
}
.gal-gallery .carousel-indicators button.active {
background: var(--accent);
width: 30px;
}
/* Lightbox modal */
.modal-gal-premium .modal-content {
background: rgba(0,0,0,0.95);
backdrop-filter: blur(8px);
}
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 64px;
height: 64px;
border-radius: 100px;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.2);
color: white;
font-size: 40px;
line-height: 64px;
text-align: center;
cursor: pointer;
transition: 0.2s;
z-index: 1060;
}
.gal-lightbox-nav:hover {
background: var(--accent);
}
.gal-prev { left: 25px; }
.gal-next { right: 25px; }
/* ---------------------------------------------------------- */
/* CONTACTO - FORMULARIO PREMIUM */
/* ---------------------------------------------------------- */
.form-premium .form-control,
.form-premium .form-select {
border-radius: var(--radius-sm);
border: 2px solid var(--border-light);
padding: 0.9rem 1.2rem;
font-size: 1rem;
transition: 0.2s;
background: white;
}
.form-premium .form-control:focus,
.form-premium .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 5px var(--accent-dim);
}
.form-premium .form-label {
font-weight: 700;
margin-bottom: 0.6rem;
color: var(--text-primary);
}
/* ---------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------- */
footer {
background: #002145; /* sólido */
border-top: none;
color: rgba(255,255,255,0.92);
}
.footer-title {
font-weight: 900;
font-size: 1.4rem;
letter-spacing: -0.02em;
}
.footer-link {
color: var(--text-muted);
font-weight: 600;
transition: 0.2s;
text-decoration: none;
}
.footer-link:hover {
color: var(--accent);
padding-left: 5px;
}
/* Ajustes de contraste para footer oscuro */
footer .footer-title { color: #ffffff; }
footer .text-muted { color: rgba(255,255,255,0.72) !important; }
footer .footer-link { color: rgba(255,255,255,0.78); }
footer .footer-link:hover { color: #ffffff; }
footer .btn-premium-outline{
border-color: rgba(255,255,255,0.35);
color: #ffffff;
}
footer .btn-premium-outline:hover{
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.55);
color: #ffffff;
}
footer .divider-soft{
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}
/* ---------------------------------------------------------- */
/* MICROINTERACCIONES Y UTILERÍAS */
/* ---------------------------------------------------------- */
.hover-lift {
transition: transform 0.3s var(--transition-bounce);
}
.hover-lift:hover {
transform: translateY(-8px);
}
.anchor-offset {
scroll-margin-top: 100px;
}
/* Responsive fino */
@media (max-width: 991px) {
body { padding-top: 75px; }
.hero-card { padding: 2rem; }
.section { padding: 80px 0; }
}
@media (max-width: 768px) {
.navbar-collapse {
background: white;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 1rem;
margin-top: 10px;
}
}
/* Personalización del scroll */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-soft);
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 10px;
}
/* --- FIX: HERO estable + sin loops de error --- */
.hero-media{
aspect-ratio: 4 / 5;
overflow: hidden;
}
@media (max-width: 991px){
.hero-media{ aspect-ratio: 16 / 10; }
}
#heroImg{
width:100%;
height:100%;
object-fit:cover;
display:block;
transform: translateZ(0);
}
.hero-fallback{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding:2rem;
text-align:center;
gap:.75rem;
}
/* --- Tipografía: Poppins (como en el logo) --- */
:root{
--font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body{ font-family: var(--font-sans); }
h1,h2,h3,h4,h5,h6,.navbar-brand{ font-family: var(--font-sans); }
/* ---------------------------------------------------------- */
/* FIX MOBILE - sin scroll horizontal + navbar toggler fiable */
/* ---------------------------------------------------------- */
html, body { width: 100%; overflow-x: hidden; }
/* Evita overflow por controles del carrusel / elementos posicionados */
.gal-gallery, .gal-gallery .carousel, .hero, footer { overflow-x: clip; }
/* Toggler visible y clickeable en mobile (sin depender de theme) */
.navbar .navbar-toggler{
border-color: rgba(15, 23, 42, 0.18);
padding: .55rem .75rem;
border-radius: 14px;
}
.navbar .navbar-toggler:focus{
box-shadow: 0 0 0 5px var(--accent-dim);
}
.navbar .navbar-toggler-icon{
width: 1.45em;
height: 1.45em;
/* Ícono tipo "hamburger" (SVG) para garantizar contraste */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Controles del carrusel: que no empujen el layout en phone */
@media (max-width: 576px){
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
width: 46px;
height: 46px;
margin: 0;
}
.gal-gallery .carousel-control-prev{ left: 8px; }
.gal-gallery .carousel-control-next{ right: 8px; }
.gal-gallery .carousel-control-prev-icon,
.gal-gallery .carousel-control-next-icon{
transform: scale(0.95);
}
}
/* Collapse: que el menú no genere ancho extra */
@media (max-width: 991px){
.navbar .container{ overflow-x: clip; }
.navbar-collapse{ max-width: 100%; }
.navbar-nav{ width: 100%; }
.navbar-nav .nav-link{ width: 100%; }
.navbar .d-flex.gap-2.ms-lg-3{
width: 100%;
margin-top: .75rem;
}
.navbar .d-flex.gap-2.ms-lg-3 .btn{
width: 100%;
justify-content: center;
}
}
/* ================================================= */
/* CALIBRACIÓN TIPOGRÁFICA – DECOR SERVICE */
/* ================================================= */
/* Base general un poco más contenida */
body{
font-size: 15.5px;
}
/* Títulos de sección */
.section-title{
font-size: clamp(1.9rem, 4vw, 2.8rem);
}
/* Hero principal */
.hero h1{
font-size: clamp(2.2rem, 5vw, 3.2rem);
}
/* Subtítulos */
.section-subtitle{
font-size: 1.05rem;
}
/* Lista del hero */
.hero-list li{
font-size: 1rem;
}
/* Títulos de cards */
.card-premium h3{
font-size: 1.25rem;
}
/* Texto de cards */
.card-premium p{
font-size: 0.95rem;
}
/* Navbar */
.navbar-nav .nav-link{
font-size: 0.95rem;
}
/* Eyebrow */
.eyebrow{
font-size: 0.72rem;
padding: 0.45rem 1rem;
}
/* Reducimos un poco el aire vertical */
.section{
padding: 95px 0;
}
@media (max-width: 991px){
.section{
padding: 70px 0;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
/* Flotante WhatsApp (Decor Service) */
:root{
--ds-accent:#1392e3;
--ds-accent-dark:#0f79bf;
--wa-border:#e3e6ea;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
/* botón */
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#25D366,#128C7E); /* WhatsApp */
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,211,102,.45);
transition:transform .3s, box-shadow .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(37,211,102,.55);
}
/* tarjeta */
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid var(--wa-border);
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.3s;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-dark));
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
}
.wa-avatar img{ width:26px; height:26px; object-fit:contain; }
.wa-title{ font-weight:800; letter-spacing:-.2px; }
.wa-status{ font-size:.85rem; opacity:.95; }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
line-height:1;
}
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f7f9fb;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:90%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#ffffff;
border:1px solid var(--wa-border);
align-self:flex-start;
}
.wa-user{
background:rgba(19,146,227,.10);
border:1px solid rgba(19,146,227,.25);
align-self:flex-end;
}
.wa-mini{
font-size:.82rem;
color:#5f6b76;
padding-top:2px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid var(--wa-border);
background:#ffffff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid var(--wa-border);
font-family:inherit;
outline:none;
}
.wa-compose textarea:focus{
border-color:rgba(19,146,227,.55);
box-shadow:0 0 0 4px rgba(19,146,227,.12);
}
.wa-send{
background:var(--ds-accent);
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{ background:var(--ds-accent-dark); }
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}