*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:#111;background:#fff}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.header{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #eee;backdrop-filter:saturate(1.2)}
.brand{font-weight:700}
.nav a{margin-left:16px;text-decoration:none;color:#333}
.hero{padding:72px 20px 56px 36px;color:#fff;background:linear-gradient(180deg,rgba(21,161,168,.55),rgba(43,58,103,.75)),url('../background/pxfuel.jpg') center/cover no-repeat;border-bottom:1px solid rgba(255,255,255,.08)}
.hero .lead{color:#e8f6f7}
.hero .cta{background:#15a1a8}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 12px}
.lead{font-size:18px;color:#333;max-width:720px}
.cta{display:inline-block;margin-top:18px;background:#111;color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.services .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:16px 0}
.services article{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.services article img{width:100%;height:180px;object-fit:cover;border-radius:10px;display:block}
.why ul{padding-left:18px}
.clients,.why,.services{padding:24px 0;border-top:1px solid #f1f1f1}
.contact{padding:24px 0;border-top:1px solid #f1f1f1}
.widget{margin-top:12px}
.widget-frame{width:100%;height:520px;border:1px solid #ddd;border-radius:10px;background:#fafafa}
.alt{margin-top:8px;color:#333}
.footer{padding:18px 0;border-top:1px solid #eee;color:#555}

/* Floating Mark widget */
#cl-launcher{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#15a1a8,#2b3a67);box-shadow:0 8px 24px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;z-index:9999;transition:transform .15s ease}
#cl-launcher svg{width:35px;height:35px}
#cl-launcher:hover{transform:scale(1.05)}
#cl-widget{position:fixed;right:18px;bottom:86px;width:380px;max-height:50vh;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.1);box-shadow:0 24px 60px rgba(0,0,0,.28);background:#0b0f14;z-index:9999;opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s}
#cl-widget.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;transition:opacity .18s ease-out,transform .18s ease-out}
#cl-iframe{width:100%;height:50vh;border:0;background:#0b0f14}

@media (max-width: 520px){#cl-widget{right:10px;left:10px;width:auto;max-height:55vh}#cl-iframe{height:55vh}}
@media (prefers-reduced-motion: reduce){#cl-widget{transition:none;transform:none}#cl-launcher{transition:none}}

@media (prefers-color-scheme: dark){html,body{color:#eee;background:#101213}.nav a{color:#ddd}.lead{color:#cfd8dc}.cta{background:#0d1117}.services article{background:#0b0f14;border-color:#222}.widget-frame{background:#0b0f14;border-color:#222}.header,.clients,.why,.services,.contact,.footer{border-color:#222}}

/* Service microsites: simple gallery/placeholder styles */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.gallery figure{margin:0;background:#f8f9fb;border:1px dashed #c9d2e1;border-radius:10px;min-height:160px;display:flex;align-items:center;justify-content:center;color:#6b7a90;font-size:14px}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:10px}
.note{font-size:14px;color:#667}

/* Image hover zoom for cards and galleries */
.services article{overflow:hidden}
.services article img{transition:transform .25s ease,box-shadow .25s ease}
.services article:hover img{transform:scale(1.04);box-shadow:0 10px 24px rgba(0,0,0,.18)}

.gallery figure{position:relative;overflow:hidden}
.gallery img{transition:transform .25s ease,filter .25s ease}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figure:hover{background:#fff;border:1px solid rgba(21,161,168,.35);box-shadow:0 12px 36px rgba(0,0,0,.22)}

/* Gallery hover: allow overflow and enlarge 25% for readability */
.gallery figure{overflow:visible;position:relative;z-index:1}
.gallery img{transform-origin:center center}
.gallery figure:hover{z-index:10}
.gallery figure:hover img{transform:scale(1.25);box-shadow:0 16px 48px rgba(0,0,0,.28);}

/* Brand logo image sizing */
.brand .brand-link{display:block;width:140px;height:28px;text-indent:-9999px;overflow:hidden}

/* Brand logo override */
.brand .brand-link{display:inline-block;width:156px;height:32px;text-indent:-9999px;overflow:hidden;background-size:contain;background-repeat:no-repeat;background-position:left center}

/* Brand logo final sizing */
.brand .brand-link{width:240px;height:48px}
@media (max-width:520px){.brand .brand-link{width:190px;height:38px}}

/* Brand logo 3x size per request */
.brand .brand-link{width:720px;height:144px}
@media (max-width:520px){.brand .brand-link{width:570px;height:114px;max-width:90vw}}

/* Brand logo image source (cropped) */
.brand .brand-link{background-image:url('../img/brand/CreatiaLife_header_transparent_cropped.png')}

/* Brand logo: use tight-cropped asset */
.brand .brand-link{background-image:url('../img/brand/CreatiaLife_header_cropped_tight.png')}

/* Brand logo: switch to tight-cropped header */
.brand .brand-link{background-image:url('../img/brand/CreatiaLife_header_tight.png')}

/* Brand logo: reduce to 30% of previous */
.brand .brand-link{width:216px;height:43px}
@media (max-width:520px){.brand .brand-link{width:171px;height:34px;max-width:80vw}}

/* --- Vibes UI 2025-11-12: subtle warmth and liveliness --- */
:root{
	--brand-teal:#00c2ff;
	--brand-lime:#78ff9e;
}
.wrap{max-width:1120px}
.hero{color:#0b1d1e;background:
	radial-gradient(40% 60% at 20% 10%, rgba(234,255,247,.85) 0%, rgba(234,255,247,0) 70%),
	linear-gradient(180deg, #f9fffd 0%, #ffffff 65%),
	linear-gradient(180deg, rgba(21,161,168,.30), rgba(43,58,103,.35)),
	url('../background/pxfuel.jpg') center/cover no-repeat;
}
.hero .lead{color:#214449}
.hero .cta{background:linear-gradient(90deg,var(--brand-teal),var(--brand-lime));color:#073;border:0}
.services article{background:#fff;border-color:#eaeaea;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.services article img{filter:brightness(1.06) saturate(1.12)}
.services article:hover img{transform:scale(1.02)}
.nav a:hover{color:#0b7aa2}
.footer{color:#667}
/* --- end Vibes UI --- */

/* === Vibes/Warm style block (2025-11-12) === */
:root{ --gutter: clamp(16px, 4vw, 24px); }
.hero{
	background: radial-gradient(40% 60% at 20% 10%, #eafff7 0%, transparent 70%),
	            linear-gradient(180deg, #f9fffd 0%, #ffffff 65%);
}
.card img{ filter: brightness(1.05) saturate(1.15); transition: transform .25s ease, filter .25s ease; }
.card:hover img{ transform: scale(1.02); }
.card::after{ background: rgba(0,0,0,.18); }
.btn-primary{ background: linear-gradient(90deg,#00c2ff,#78ff9e); color: #073; }
.btn-primary:hover{ filter: saturate(1.1) brightness(1.03); }
.container{ max-width: 1120px; }
@media (max-width: 640px){
	h2{ padding-left: max(var(--gutter), env(safe-area-inset-left));
		padding-right: max(var(--gutter), env(safe-area-inset-right));
		margin: 40px 0 12px; }
	.container{ padding-inline: var(--gutter); }
}
/* === End warm block === */
/* === Mobile section gutters (index only anchors) — 2025-11-12 === */
@media (max-width: 640px){
	#why, #contact{ padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
}
/* === End mobile gutters === */
/* === Mobile gutters (broad fallback for pages without .container) — 2025-11-13 === */
@media (max-width: 640px){
	/* Titles on services-like pages */
	h2, h3, .section-title{ padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
	/* Fallback padding if page lacks .container wrapper */
	main > section, .section{ padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
}
/* === End mobile gutters fallback === */
/* === Mobile gutters for service pages (agentes/consultoria/rag) — 2025-11-13 === */
@media (max-width: 640px){
	/* Sections marked as services */
	.wrap.services{ 
		padding-left: max(var(--gutter), env(safe-area-inset-left));
		padding-right: max(var(--gutter), env(safe-area-inset-right));
	}
	/* Contact block variant on service pages */
	.contact.alt{
		padding-left: max(var(--gutter), env(safe-area-inset-left));
		padding-right: max(var(--gutter), env(safe-area-inset-right));
	}
}
/* === End service page gutters === */