/* Capa animada da home: "O cartão de visita que vira site" (2026-10-09) */
@font-face { font-family: 'CS Montserrat'; src: url('../../../images/cardsite/hero/montserrat-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CS Montserrat'; src: url('../../../images/cardsite/hero/montserrat-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'CS Montserrat'; src: url('../../../images/cardsite/hero/montserrat-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'CS Montserrat'; src: url('../../../images/cardsite/hero/montserrat-extrabold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'CS Playfair'; src: url('../../../images/cardsite/hero/playfair-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CS Playfair'; src: url('../../../images/cardsite/hero/playfair-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.cs-hero {
	--papel: #f4eee3;
	--tinta: #1d1b18;
	--tinta-suave: #4f493f;
	--teal: #1cabb0;
	--neon: #5eead4;
	--azul: #5b7cfa;
	--noite: #061226;
	--ease: cubic-bezier(.77, 0, .18, 1);
	position: relative;
	overflow: hidden;
	min-height: clamp(620px, 86vh, 800px);
	display: flex;
	align-items: center;
	font-family: 'CS Montserrat', 'Montserrat', Arial, sans-serif;
	color: var(--tinta);
	isolation: isolate;
}
.cs-hero[hidden] { display: none; }
.cs-hero *, .cs-hero *::before, .cs-hero *::after { box-sizing: border-box; }

/* Os dois mundos */
.cs-mundo-papel {
	position: absolute; inset: 0; z-index: -3;
	background:
		radial-gradient(900px 500px at 15% 20%, rgba(255, 255, 255, .7), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		var(--papel);
}
.cs-mundo-digital {
	position: absolute; inset: 0; z-index: -2;
	clip-path: polygon(72% 0, 100% 0, 100% 100%, 58% 100%);
	background: radial-gradient(700px 520px at 78% 45%, rgba(28, 171, 176, .35), transparent 65%), radial-gradient(600px 400px at 95% 100%, rgba(91, 124, 250, .35), transparent 60%), var(--noite);
}
.cs-grade {
	position: absolute; inset: -40px;
	background-image: linear-gradient(rgba(94, 234, 212, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 234, 212, .09) 1px, transparent 1px);
	background-size: 40px 40px;
	animation: cs-grade 14s linear infinite;
}
.cs-brilho { position: absolute; inset: 0; background: radial-gradient(420px 420px at 72% 48%, rgba(94, 234, 212, .28), transparent 70%); opacity: .35; transition: opacity 1.2s var(--ease); }
.cs-em-site .cs-brilho { opacity: 1; }
@keyframes cs-grade { to { transform: translate(40px, 40px); } }

.cs-emenda { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
.cs-emenda-celular { display: none; }
.cs-emenda-linha { stroke: var(--neon); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(94, 234, 212, .9)) drop-shadow(0 0 18px rgba(94, 234, 212, .6)); stroke-dasharray: 18 10; animation: cs-fluxo 1.6s linear infinite; }
@keyframes cs-fluxo { to { stroke-dashoffset: -56; } }

.cs-hero-inner {
	width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 32px;
	display: grid; grid-template-columns: 1.02fr .98fr; gap: 24px; align-items: center;
}

/* Texto (lado do papel) */
.cs-marca { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--tinta); }
.cs-marca img { border-radius: 7px; }
.cs-marca span { font-weight: 600; color: #8a8173; }
.cs-hero h1 { margin: 0; font-size: clamp(42px, 5.3vw, 78px); line-height: 1.02; letter-spacing: -.02em; color: var(--tinta); }
.cs-t-papel { display: block; font-family: 'CS Playfair', Georgia, serif; font-weight: 700; }
.cs-t-site { display: inline-block; font-weight: 800; background: linear-gradient(90deg, #0e9aa0, var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.cs-cursor { display: inline-block; width: .09em; height: .82em; margin-left: .06em; vertical-align: -.04em; background: var(--teal); animation: cs-pisca 1s steps(1) infinite; }
@keyframes cs-pisca { 50% { opacity: 0; } }
.cs-sub { margin: 24px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--tinta-suave); }
.cs-sub strong { color: var(--tinta); }
.cs-selos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.cs-selos li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 30px; background: rgba(255, 255, 255, .75); border: 1px solid #e3d8c6; font-size: 14px; font-weight: 700; color: var(--tinta); }
.cs-selos svg { color: var(--teal); }
.cs-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin-top: 32px; }
.cs-botao { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 18px 30px; border-radius: 40px; background: #10141d; color: #fff !important; font-size: 18px; font-weight: 800; text-decoration: none !important; box-shadow: 0 14px 30px rgba(16, 20, 29, .28), 0 0 0 0 rgba(28, 171, 176, .5); transition: transform .2s, box-shadow .2s; animation: cs-pulso 2.6s ease-out infinite; }
.cs-botao:hover { transform: translateY(-2px); background: #0b0e15; }
.cs-botao svg { transition: transform .2s; }
.cs-botao:hover svg { transform: translateX(4px); }
@keyframes cs-pulso { 0% { box-shadow: 0 14px 30px rgba(16, 20, 29, .28), 0 0 0 0 rgba(28, 171, 176, .55); } 70%, 100% { box-shadow: 0 14px 30px rgba(16, 20, 29, .28), 0 0 0 16px rgba(28, 171, 176, 0); } }
.cs-teste { margin: 0; font-size: 15px; color: var(--tinta-suave); }
.cs-teste strong { color: #0e8f94; }

/* Palco: o objeto que se transforma */
.cs-palco { position: relative; height: 660px; }
.cs-objeto {
	position: absolute; left: 50%; top: 47%;
	width: 420px; height: 250px; border-radius: 12px;
	background: #fbf7f0;
	transform: translate(-50%, -50%) rotate(-7deg);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 22px 40px rgba(60, 45, 25, .28);
	transition: width 1.1s var(--ease), height 1.1s var(--ease), border-radius 1.1s var(--ease), transform 1.1s var(--ease), background-color 1.1s var(--ease), box-shadow 1.1s;
}
.cs-objeto[data-estado="site"] {
	width: 296px; height: 600px; border-radius: 46px; background: #0a0d14;
	transform: translate(-50%, -50%) rotate(3deg);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 40px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(94, 234, 212, .25);
}
.cs-face { position: absolute; overflow: hidden; }
.cs-face-papel { inset: 0; border-radius: inherit; opacity: 1; transition: opacity .6s .4s; }
.cs-face-site { inset: 11px; border-radius: 36px; opacity: 0; transition: opacity .45s; }
.cs-objeto[data-estado="site"] .cs-face-papel { opacity: 0; transition: opacity .7s; }
.cs-objeto[data-estado="site"] .cs-face-site { opacity: 1; transition: opacity .55s .45s; }

/* Feixe que "escaneia" o objeto durante a transformação */
.cs-objeto::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(94, 234, 212, .65) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.cs-objeto.cs-morph::after { animation: cs-scan 1.1s var(--ease); }
@keyframes cs-scan { 0% { opacity: 0; background-position: 130% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }

/* Pixels que voam na transformação */
.cs-pixels { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.cs-pixels i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--neon); opacity: 0; box-shadow: 0 0 10px rgba(94, 234, 212, .9); }
.cs-pixels i:nth-child(3n) { background: var(--azul); width: 6px; height: 6px; }
.cs-pixels i:nth-child(4n) { background: #fff; width: 5px; height: 5px; }
.cs-morph .cs-pixels i { animation: cs-pixel 1.1s var(--d) var(--ease); }
@keyframes cs-pixel { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 260px), calc(var(--y) * 330px)) scale(1.2) rotate(90deg); } }

/* Cartões de papel */
.cs-face-papel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .25 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cs-cartao { display: none; position: absolute; inset: 0; align-items: center; gap: 22px; padding: 26px 30px; }
.cs-objeto[data-papel="doce"] .cs-cartao.cs-n-doce,
.cs-objeto[data-papel="bloom"] .cs-cartao.cs-n-bloom,
.cs-objeto[data-papel="psf"] .cs-cartao.cs-n-psf { display: flex; }
.cs-cartao-logo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; }
.cs-cartao-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-cartao-txt strong { font-family: 'CS Playfair', Georgia, serif; font-size: 27px; font-weight: 700; line-height: 1.1; }
.cs-cartao-txt em { font-style: normal; font-size: 12.5px; margin: 4px 0 14px; opacity: .8; }
.cs-cartao-txt span { font-size: 12.5px; letter-spacing: .04em; line-height: 1.6; }
.cs-cartao.cs-n-doce { background: linear-gradient(135deg, #fdf5f1, #f7e4dc); color: #7a3f3a; border-left: 8px solid #e7b9ad; }
.cs-cartao.cs-n-bloom { background: linear-gradient(135deg, #e3c7a3, #d2ae84); color: #3a2816; }
.cs-cartao.cs-n-psf { background: #f7f7f4; color: #111; border-bottom: 10px solid #111; }

/* Mini sites */
.cs-site { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; padding: 12px 16px 16px; text-align: center; }
.cs-objeto[data-site="doce"] .cs-site.cs-n-doce,
.cs-objeto[data-site="bloom"] .cs-site.cs-n-bloom,
.cs-objeto[data-site="psf"] .cs-site.cs-n-psf { display: flex; }
.cs-site-topo { width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 6px 0 14px; font-size: 9.5px; font-weight: 700; }
.cs-site-topo span { padding: 4px 9px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; }
.cs-site-topo b { width: 22px; height: 22px; line-height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 9px; }
.cs-site-logo { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.cs-site-nome { margin-top: 12px; font-size: 20px; font-weight: 800; line-height: 1.15; }
.cs-site-sub { margin: 3px 0 12px; font-style: normal; font-size: 11.5px; opacity: .85; }
.cs-site-icones { display: flex; gap: 9px; margin-bottom: 14px; }
.cs-site-icones svg { box-sizing: content-box; width: 15px; height: 15px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .7); color: #222; }
.cs-site-botao { width: 100%; padding: 10px; border-radius: 22px; font-size: 13px; font-weight: 700; }
.cs-site-foto { width: 100%; height: 150px; margin: 12px 0; border-radius: 14px; object-fit: cover; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.cs-site.cs-n-doce { background: linear-gradient(180deg, #f6e1db, #efd0c8); color: #5b2e2a; }
.cs-site.cs-n-doce .cs-site-botao { background: #fff; color: #7a3f3a; }
.cs-site.cs-n-doce .cs-site-botao2 { background: #c9706a; color: #fff; }
.cs-site.cs-n-bloom { background: linear-gradient(180deg, #d9b083, #c99a69); color: #2c1d10; }
.cs-site.cs-n-bloom .cs-site-botao { background: #173a8a; color: #fff; }
.cs-site.cs-n-bloom .cs-site-botao2 { background: rgba(255, 255, 255, .85); color: #173a8a; }
.cs-site.cs-n-psf { background: linear-gradient(180deg, #6b778a, #2a313f); color: #fff; }
.cs-site.cs-n-psf .cs-site-botao { background: #fff; color: #111; }
.cs-site.cs-n-psf .cs-site-botao2 { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .5); }

/* QR Code e legenda */
.cs-qr { position: absolute; right: 2%; bottom: 17%; z-index: 4; width: 112px; padding: 9px 9px 6px; border-radius: 16px; background: #fff; color: #0f3d40; text-align: center; box-shadow: 0 18px 36px rgba(0, 0, 0, .4); opacity: 0; transform: scale(.6) rotate(12deg); transition: opacity .4s, transform .6s var(--ease); }
.cs-qr svg { display: block; width: 100%; height: auto; }
.cs-qr small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800; }
.cs-em-site .cs-qr { opacity: 1; transform: scale(1) rotate(6deg); transition-delay: .9s; }
.cs-legenda { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; height: 40px; text-align: center; font-size: 14px; font-weight: 700; }
.cs-legenda span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 9px 18px; border-radius: 30px; transition: opacity .5s; }
.cs-leg-papel { background: rgba(255, 255, 255, .9); color: #6b5f4f; border: 1px solid #e3d8c6; opacity: 1; }
.cs-leg-site { background: rgba(6, 18, 38, .85); color: var(--neon); border: 1px solid rgba(94, 234, 212, .45); opacity: 0; }
.cs-em-site .cs-leg-papel { opacity: 0; }
.cs-em-site .cs-leg-site { opacity: 1; transition-delay: .6s; }

/* Tablet e celular: papel em cima, digital embaixo */
@media (max-width: 991.98px) {
	.cs-hero { min-height: 0; }
	.cs-mundo-digital { clip-path: polygon(0 60%, 100% 52%, 100% 100%, 0 100%); }
	.cs-emenda-linha { display: none; }
	.cs-hero-inner { grid-template-columns: 1fr; gap: 8px; padding: 44px 20px 20px; }
	.cs-palco { height: 640px; }
	.cs-emenda-celular { display: inline; }
}
@media (max-width: 575.98px) {
	.cs-hero-inner { padding: 32px 16px 12px; }
	.cs-hero h1 { font-size: 40px; }
	.cs-sub { font-size: 16px; }
	.cs-botao { width: 100%; justify-content: center; }
	.cs-palco { height: 600px; }
	.cs-objeto { width: 320px; height: 192px; }
	.cs-objeto[data-estado="site"] { width: 270px; height: 548px; }
	.cs-cartao { gap: 14px; padding: 18px 20px; }
	.cs-cartao-logo { flex-basis: 70px; width: 70px; height: 70px; }
	.cs-cartao-txt strong { font-size: 21px; }
	.cs-cartao-txt em { margin-bottom: 8px; font-size: 11px; }
	.cs-cartao-txt span { font-size: 11px; }
	.cs-site-foto { height: 128px; }
	.cs-qr { width: 92px; right: 0; bottom: 14%; }
	.cs-legenda { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-grade, .cs-emenda-linha, .cs-botao, .cs-cursor { animation: none; }
	.cs-objeto, .cs-face-papel, .cs-face-site { transition: none; }
}