/* ── V4 Deferred Styles ── */ /* Brand themes (set on via class) */ .brand-suit{--brand:#c9a96e;--brand-dark:#a8873f;--brand-light:#e8d5a8} .brand-esse{--brand:#ed3d8b;--brand-dark:#c4296f;--brand-light:#f9b8d4} .brand-lilalife{--brand:#E8017F;--brand-dark:#b9005f;--brand-light:#f9b8d4} .brand-liva{--brand:#ed3d8b;--brand-dark:#c4296f;--brand-light:#f9b8d4} .brand-lilium{--brand:#9b59b6;--brand-dark:#7d3c98;--brand-light:#d2b4de} .brand-aden{--brand:#059669;--brand-dark:#047857;--brand-light:#6ee7b7} .brand-eva{--brand:#059669;--brand-dark:#047857;--brand-light:#6ee7b7} .brand-mabel{--brand:#dc2626;--brand-dark:#b91c1c;--brand-light:#fca5a5} .brand-sandra{--brand:#dc2626;--brand-dark:#b91c1c;--brand-light:#fca5a5} /* Centered nav (Esse/Liva brands) */ .v4-nav--centered .v4-nav__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap} .v4-nav--centered .v4-nav__links--left,.v4-nav--centered .v4-nav__links--right{display:none;gap:1.5rem;list-style:none;align-items:center} .v4-nav--centered .v4-nav__links--left{justify-content:flex-end} .v4-nav--centered .v4-nav__links--right{justify-content:flex-start} .v4-nav--centered .v4-nav__links--left a,.v4-nav--centered .v4-nav__links--right a{font-size:.875rem;font-weight:500;color:var(--text);transition:color .2s;padding:.25rem 0;border-bottom:2px solid transparent} .v4-nav--centered .v4-nav__links--left a:hover,.v4-nav--centered .v4-nav__links--right a:hover,.v4-nav--centered .v4-nav__links--left a[aria-current="page"],.v4-nav--centered .v4-nav__links--right a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)} .v4-nav--centered .v4-nav__logo{margin:0 2rem;text-align:center} @media(min-width:768px){.v4-nav--centered .v4-nav__inner{display:flex;justify-content:center}.v4-nav--centered .v4-nav__links--left,.v4-nav--centered .v4-nav__links--right{display:flex}.v4-nav--centered .v4-nav__toggle{display:none}} /* WhatsApp bottombar contrast */ .v4-bottombar .whatsapp-btn{color:var(--text-muted)} .v4-bottombar .whatsapp-btn svg{color:#25d366} /* Buttons */ .v4-btn{display:inline-block;padding:.75rem 1.5rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent;line-height:1.4} .v4-btn--primary{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)} .v4-btn--primary:hover{background:var(--brand);border-color:var(--brand)} .v4-btn--outline{background:transparent;color:var(--brand);border-color:var(--brand)} .v4-btn--outline:hover{background:var(--brand);color:#fff} /* Breadcrumbs */ .v4-breadcrumbs{background:var(--bg-alt);padding:.75rem 0;font-size:.8125rem} .v4-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;align-items:center} .v4-breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.375rem;color:var(--text-muted)} .v4-breadcrumbs a{color:var(--brand);text-decoration:none} .v4-breadcrumbs a:hover{text-decoration:underline} .v4-breadcrumbs [aria-current]{color:var(--text-muted)} /* Hero */ .v4-hero{position:relative;overflow:hidden;background:#111;min-height:50vh;max-height:80vh} .v4-hero__slider{position:relative;width:100%;height:100%;min-height:50vh} .v4-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease} .v4-hero__slide.active{opacity:1;z-index:1} .v4-hero__slide img{width:100%;height:100%;object-fit:cover} .v4-hero__overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 100%)} .v4-hero__title{color:#fff;font-size:2rem;font-weight:700;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.3)} .v4-hero__subtitle{color:rgba(255,255,255,.9);font-size:1rem;max-width:600px;margin-bottom:1.5rem;line-height:1.6} .v4-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap} .v4-hero__cta .v4-btn--primary{background:var(--brand-dark);border-color:var(--brand-dark)} .v4-hero__cta .v4-btn--outline{color:#fff;border-color:#fff} .v4-hero__cta .v4-btn--outline:hover{background:rgba(255,255,255,.15)} @media(min-width:768px){.v4-hero__title{font-size:3rem}.v4-hero__subtitle{font-size:1.125rem}} .v4-hero__btn{position:absolute;top:50%;z-index:3;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:none;width:2.5rem;height:2.5rem;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:background .2s;display:flex;align-items:center;justify-content:center} .v4-hero__btn:hover{background:rgba(0,0,0,.7)} .v4-hero__btn--prev{left:.75rem} .v4-hero__btn--next{right:.75rem} .v4-hero__dots{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:0} .v4-hero__dot{width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:19px;box-sizing:content-box;transition:background .2s;-webkit-tap-highlight-color:transparent} .v4-hero__dot.active{background:#fff} @media(max-width:479px){.v4-hero__overlay .container{padding-bottom:3.5rem}.v4-hero__subtitle{font-size:.875rem;margin-bottom:1rem;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.v4-hero__cta .v4-btn{padding:.625rem 1.25rem;font-size:.8125rem}.v4-hero__dot{padding:14px}} /* Services Grid */ .v4-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem} .v4-services-grid--full{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .v4-service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;text-decoration:none;color:var(--text);display:flex;flex-direction:column} .v4-service-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)} .v4-service-card__img{aspect-ratio:4/3;overflow:hidden} .v4-service-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .v4-service-card:hover .v4-service-card__img img{transform:scale(1.05)} .v4-service-card__body{padding:1.25rem;flex:1} .v4-service-card__body h2,.v4-service-card__body h3{font-size:1.0625rem;font-weight:600;margin-bottom:.5rem;color:var(--text)} .v4-service-card__body p{font-size:.875rem;color:var(--text-muted);line-height:1.5} /* Gallery */ .v4-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem} @media(min-width:768px){.v4-gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}} .v4-gallery__item{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;cursor:pointer} .v4-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .v4-gallery__item:hover img{transform:scale(1.08)} /* Blog Cards */ .v4-blog-cards{display:grid;grid-template-columns:1fr;gap:1.5rem} @media(min-width:640px){.v4-blog-cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.v4-blog-cards{grid-template-columns:repeat(3,1fr)}} .v4-blog-cards--full{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .v4-blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s} .v4-blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)} .v4-blog-card__img{aspect-ratio:16/10;overflow:hidden} .v4-blog-card__img img{width:100%;height:100%;object-fit:cover} .v4-blog-card__body{padding:1.25rem} .v4-blog-card__body h2,.v4-blog-card__body h3{font-size:1rem;font-weight:600;margin-bottom:.5rem} .v4-blog-card__body p{font-size:.875rem;color:var(--text-muted);line-height:1.5} .v4-blog-card__more{display:inline-block;margin-top:.5rem;font-size:.8125rem;font-weight:600;color:var(--brand)} /* FAQ */ .v4-faq{max-width:700px;margin:0 auto} .v4-faq details{border:1px solid #e5e7eb;border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden} .v4-faq summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-size:.9375rem;background:var(--bg-alt);list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background .2s} .v4-faq summary::-webkit-details-marker{display:none} .v4-faq summary::after{content:"+";font-size:1.25rem;font-weight:400;color:var(--text-muted);transition:transform .2s} .v4-faq details[open] summary::after{content:"-"} .v4-faq details[open] summary{background:var(--brand-light)} .v4-faq details p{padding:1rem 1.25rem;font-size:.875rem;line-height:1.7;color:var(--text-muted)} /* Service Detail */ .v4-service-detail__layout{display:grid;gap:2rem} @media(min-width:768px){.v4-service-detail__layout{grid-template-columns:1fr 1fr}} .v4-service-detail__image{border-radius:var(--radius);overflow:hidden} .v4-service-detail__image img{width:100%;height:auto;object-fit:cover} .v4-service-detail__content h1{font-size:1.75rem;font-weight:700;margin-bottom:1rem} .v4-service-detail__body{font-size:.9375rem;line-height:1.8;color:var(--text)} .v4-service-detail__body p{margin-bottom:1rem} .v4-service-detail__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem} /* Blog Detail */ .v4-blog-detail h1{font-size:2rem;font-weight:700;margin-bottom:.5rem} .v4-blog-detail__date{display:block;color:var(--text-muted);font-size:.8125rem;margin-bottom:1.5rem} .v4-blog-detail__images{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem} .v4-blog-detail__images img{border-radius:var(--radius);width:100%;cursor:pointer} .v4-blog-detail__body{font-size:1rem;line-height:1.8} .v4-blog-detail__body p{margin-bottom:1rem} .v4-blog-detail__body img{border-radius:var(--radius);margin:1rem 0} /* About */ .v4-about__company{font-size:1.25rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--text)} .v4-about__whatsapp{text-align:center;margin-bottom:.5rem} .v4-about__whatsapp a{color:var(--brand);font-size:1.125rem;font-weight:500;transition:color .2s} .v4-about__whatsapp a:hover{color:var(--brand-dark)} .v4-about__address{text-align:center;color:var(--text-muted);margin-bottom:1rem} .v4-about__map{margin:2rem 0;border-radius:var(--radius);overflow:hidden;border:1px solid #e5e7eb} .v4-about__map-iframe{width:100%;height:400px;border:0} @media(min-width:768px){.v4-about__map-iframe{height:500px}} .v4-about__info{display:grid;gap:1.5rem;margin-top:2rem} @media(min-width:768px){.v4-about__info{grid-template-columns:repeat(3,1fr)}} .v4-about__card{background:var(--bg-alt);padding:2rem;border-radius:var(--radius)} .v4-about__card h3{font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:var(--brand)} /* Contact */ .v4-contact{display:grid;gap:1.5rem} @media(min-width:768px){.v4-contact{grid-template-columns:repeat(3,1fr)}} .v4-contact__card{background:var(--bg-alt);padding:2rem;border-radius:var(--radius);text-align:center} .v4-contact__card h2{font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:var(--text)} /* V4 Form Layout */ .v4-form-layout{display:grid;gap:2rem;max-width:900px;margin:0 auto} @media(min-width:768px){.v4-form-layout{grid-template-columns:1fr 1.2fr}} .v4-form-layout__info{color:var(--text-muted);font-size:.9375rem;line-height:1.7;padding:1rem 0} .v4-form-layout__info p{margin-bottom:.75rem} .v4-form-layout__whatsapp a{color:#25d366;font-size:1.125rem;font-weight:500;transition:opacity .2s} .v4-form-layout__whatsapp a:hover{opacity:.8} /* V4 Form Card */ .v4-form-card{background:var(--bg-alt);border:1px solid #e5e7eb;border-radius:var(--radius);padding:2rem} .v4-form-card__title{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;color:var(--text)} /* V4 Form Grid */ .v4-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .v4-form-group{display:flex;flex-direction:column} .v4-form-group--full{grid-column:1/-1} .v4-form-group label{font-size:.8125rem;font-weight:500;color:var(--text-muted);margin-bottom:.25rem} .v4-form-group input,.v4-form-group textarea,.v4-form-group select{width:100%;padding:.625rem .75rem;border:1px solid #d1d5db;border-radius:var(--radius);font-size:.9375rem;font-family:inherit;color:var(--text);background:#fff;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .v4-form-group input:focus,.v4-form-group textarea:focus,.v4-form-group select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,0,0,.05)} .v4-form-group textarea{resize:vertical} .v4-form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem} /* V4 Form Errors & Alerts */ .v4-form-error{font-size:.75rem;color:#dc2626;margin-top:.25rem;min-height:1rem} .v4-form-alert{padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem} .v4-form-alert--success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0} .v4-form-alert--error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca} .v4-form-submit{margin-top:1rem;width:100%} .v4-form-submit:disabled{opacity:.6;cursor:not-allowed} @media(max-width:639px){.v4-form-grid{grid-template-columns:1fr}.v4-form-group--full{grid-column:1}} /* Map */ .v4-map__info{background:var(--bg-alt);padding:2rem;border-radius:var(--radius);max-width:600px;margin:0 auto} /* Lightbox */ #v4-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;cursor:pointer} #v4-lightbox.open{display:flex} #v4-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--radius)} #v4-lightbox .v4-lightbox__close{position:absolute;top:1rem;right:1rem;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center} /* Topbar address hide on mobile */ @media(max-width:639px){.v4-topbar__address-text{display:none}} /* Print */ @media print{.v4-topbar,.v4-nav,.v4-bottombar,.v4-whatsapp-float,.v4-hero__btn,.v4-hero__dots{display:none!important}}