:root{
	--blue:#003BC6; --drops-blue:#1e40cf; --yellow:#F9C138;
	--red:#DD3526; --cream:#F1F0E7; --black:#000;
	--maxw:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}

.drops{
	min-height:100vh;
	background:var(--blue) url('../../img/drops/bg.png') no-repeat top center;
	background-size:cover;
	color:#fff;
	font-family:'Mukta','Montserrat',sans-serif;
	line-height:1.5;
}
.drops__inner{max-width:var(--maxw);margin:0 auto;padding:0 20px 64px}

/* Topo: voltar ao site */
.drops__topbar{display:flex;justify-content:flex-end}
.drops__back{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
	text-decoration:none;color:#fff}
.drops__back img{width:170px;height:auto}
.drops__back span{font-size:11px;font-weight:700;letter-spacing:.04em}

/* Logo DROPS */
.drops__logo{text-align:center;margin:6px 0 28px}
.drops__logo img{width:min(420px,82%);height:auto;margin:0 auto}

/* Vídeo de destaque */
.drops__video{position:relative;aspect-ratio:16/9;background:var(--black);
	border-radius:18px;overflow:hidden;display:flex;align-items:center;
	justify-content:center;margin-bottom:32px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.drops__video video{width:100%;height:100%;object-fit:cover}
.drops__play{width:84px;height:84px;border-radius:50%;border:3px solid #fff;
	background:rgba(0,0,0,.15);color:#fff;display:flex;align-items:center;
	justify-content:center;cursor:pointer;transition:transform .15s ease}
.drops__play:hover{transform:scale(1.06)}
.drops__play svg{margin-left:4px}
/* Placeholder (vídeo ainda não existe) */
.drops__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.drops__placeholder .drops__play{cursor:default}
.drops__soon{font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.9)}

/* Chamada principal */
.drops__lead{font-weight:800;text-transform:uppercase;font-size:22px;
	line-height:1.2;margin-bottom:28px}

/* CTAs (YouTube / Instagram) */
.drops__ctas{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.drops__cta{display:flex;align-items:center;justify-content:space-between;gap:16px;
	text-decoration:none;border-radius:40px;padding:12px 10px 12px 24px;
	font-weight:800;text-transform:uppercase;font-size:13px;line-height:1.2}
.drops__cta span{flex:1}
.drops__cta i{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
	display:flex;align-items:center;justify-content:center}
.drops__cta--youtube{background:var(--red);color:#fff}
.drops__cta--youtube i{background:#fff;color:var(--red)}
.drops__cta--instagram{background:var(--yellow);color:#111}
.drops__cta--instagram i{background:#111;color:var(--yellow)}

/* Corpo editorial */
.drops__body{display:grid;grid-template-columns:1fr;gap:22px;
	font-size:14px;line-height:1.55;color:#eaf0ff}
.drops__col p{margin-bottom:14px}
.drops__col p:last-child{margin-bottom:0}

/* Tablet */
@media (min-width:720px){
	.drops__inner{padding:32px 24px 88px}
	.drops__logo img{width:min(480px,58%)}
	.drops__lead{font-size:30px;max-width:760px}
	.drops__ctas{max-width:560px}
	.drops__body{grid-template-columns:1fr 1fr;gap:40px}
}

/* Desktop — 2 colunas: main (esquerda) + sidebar (direita). Design _design/ai_p4. */
@media (min-width:1024px) {
	.drops__inner{
		max-width:1360px;
		padding: 0px 40px 96px;
		display:grid;
		grid-template-columns:minmax(0,1fr) 400px;
		grid-template-areas:
			"logo   fibra"
			"video  lead"
			"video  ctas"
			"body   .";
		column-gap:64px;
		align-items:start;
		position:relative;
	}
	/* Painel da sidebar (atrás dos elementos da direita) */
	.drops__inner::before{
		content: "";
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: stretch;
        background: #085AC1;
        background: linear-gradient(178deg, rgba(8, 90, 193, 1) 0%, rgba(34, 120, 239, 1) 100%);
        border-bottom-right-radius: 28px;
        border-bottom-left-radius: 28px;
	}
	.drops__topbar{grid-area:fibra;justify-content:flex-start;padding:34px 34px 0;position:relative;z-index:1}
	.drops__back{align-items:flex-start}
	.drops__logo{grid-area:logo;text-align:left;margin:40px 0 28px}
	.drops__logo img{width:min(460px,100%);margin:0}
	.drops__video{grid-area:video;margin-bottom:0;align-self:start}
	.drops__lead{grid-area:lead;font-size:23px;max-width:none;margin:0;padding:0 34px;
		align-self:center;position:relative;z-index:1}
	.drops__ctas{grid-area:ctas;max-width:none;margin:0;padding:0 34px 34px;
		align-self:end;position:relative;z-index:1}
	.drops__body{grid-area:body;grid-template-columns:1fr;gap:22px;margin-top:44px;max-width:1040px}
}

/* Mobile */
@media (max-width:600px){
	.drops__topbar {
		background: #085AC1;
        background: linear-gradient(178deg, rgba(8, 90, 193, 1) 0%, rgba(34, 120, 239, 1) 100%);
        border-bottom-right-radius: 28px;
        border-bottom-left-radius: 28px;
        padding-top: 48px;
        padding-bottom: 24px;
        max-width: 330px;
        margin: 0 auto 48px;
	}

	.drops__back {
		margin: 0 auto;
	}
}