@font-face {
  font-family: "Cinzel Decorative";
  src:
    url("../fonts/cinzel-decorative/CinzelDecorative-Regular.ttf") format("truetype"),
    url("../fonts/cinzel-decorative/CinzelDecorative-Bold.ttf") format("truetype"),
    url("../fonts/cinzel-decorative/CinzelDecorative-Black.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus/Marcellus-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel/Cinzel.ttf") format("truetype");
  font-display: swap;
}

:root {
		--bg: #E8ECF2;          /* fundo geral (equivalente ao bege-claro adaptado) */
		--surface: #FFFFFF;
		--muted: #6b7280;
		--primary: #4B7FD8;     /* azul principal (substitui verde-água) */
		--primary-600: #3A66C3;
		--accent: #FFBC31;
		--card-radius: 14px;
		--container-max: 100vw;
		--shadow-soft: 0 10px 30px rgba(38, 58, 112, 0.08);
		--shadow-strong: 0 20px 50px rgba(75,127,216,0.16);
		--ease: cubic-bezier(.2,.8,.2,1);
		--wp--style--global--content-size: unset !important;
		--wp--style--global--wide-size: unset !important;
	}

	main { 
		margin-top: 0px !important; 
	} 
	
	.wp-block-group { 
		margin-top: 0px !important; 
		padding-top: 0px !important; 
		padding-bottom: 0px !important; 
	} 
	
	.entry-content { 
		margin-top: 0px !important; 
		padding-top: 0px !important; 
		padding-bottom: 0px !important; 
	}
	
	.e-con-inner { 
		padding-top: 0px !important; 
		padding-bottom: 0px !important; 
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		padding-bottom: 0 !important;		
	}

    /* ---------- Reset / layout base ---------- */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
		font-family: "neulis-neue", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		background: var(--bg);
		color: #222;
		margin:0;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		--wp--style--root--padding-right: unset !important;
		--wp--style--root--padding-left: unset !important;
		line-height:1.5;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;height:auto}

    .wrap{
	  width: 100%;
	  max-width: 100% !important;
      margin: 0 auto;
      padding: 0 5vw !important;
    }

	.wrap-plans {
		padding: 0 10vw !important;
	}

	.wrap-benefits {
		padding: 0 10vw !important;
	}

	.wrap-whoami {
		padding: 0 5vw 0 0 !important;
	}

	.wrap-ideal {
		padding: 0 0 0 5vw !important;
	}

	/* ---------- Top navigation (full-width) ---------- */
	nav.topbar {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw; /* 🔹 garante que o fundo ocupe toda a tela */
		z-index: 1200;
		background: rgba(232,236,242,0.98);
		backdrop-filter: blur(6px);
		border-bottom: 1px solid rgba(75,127,216,0.04);
		box-shadow: 0 6px 18px rgba(19,30,60,0.03);
		margin-left: calc(-50vw + 50%); /* 🔹 remove limitações de padding global */
		margin-right: calc(-50vw + 50%);
	}

	.nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 20px;
		width: 100%;
		max-width: 1100px; /* 🔹 limita apenas o conteúdo */
		margin: 0 auto;
	}

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:700;
      color:var(--primary-600);
      font-size:1.15rem;
    }
    .brand .logo-mark{
      width: 3.5vw;
      height: 3.5vw;
    }

    /* menu principal (desktop) */
    .nav-menu{
      display:flex;
      gap:20px;
      align-items:center;
      margin-left: 18px;
    }
    .nav-menu a{
      font-weight:700;
      color:#374151;
      padding:8px;
      border-radius:8px;
    }
    .nav-cta{
      margin-left:auto;
      display:flex;
      gap:10px;
      align-items:center;
    }
    .btn {
      display:inline-block;
      padding:10px 18px;
      border-radius:50px;
      font-weight:700;
      cursor:pointer;
      border:none;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }
    .btn-ghost{
      background:transparent;
      color: #374151;
    }
    .btn-primary{
      background: linear-gradient(90deg,var(--primary), var(--primary-600));
      color: #fff;
      box-shadow: 0 10px 30px rgba(75,127,216,0.12);
    }
    .btn-primary:hover{transform:translateY(-3px); box-shadow: var(--shadow-strong);}

    /* mobile menu toggle */
    .mobile-toggle{
      display:none;
      background:transparent;
      border:none;
      font-size:18px;
      padding:8px;
    }

    /* ---------- Hero / Intro ---------- 
    .hero{
      background: linear-gradient(135deg, #7fb3f6 0%, #3f66c0 100%);
      color:#fff;
      padding:86px 0 64px;
      clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
      text-align:center;
    }*/
	.hero {
	background-image:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' opacity='0.15'><text y='50%' x='50%' text-anchor='middle' dominant-baseline='middle' font-size='32'>🩺</text></svg>"),
		linear-gradient(135deg, #7fb3f6 0%, #3f66c0 100%);
	background-repeat: repeat;
	background-size: 60px 60px, cover;
	color: #fff;
	padding: 86px 0 64px;
	clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
	text-align: center;
	}

    .hero .wrap{
      display:flex;
      gap:30px;
      align-items:center;
      justify-content:center;
      flex-direction:column;
    }
    .hero h1{
  	  font-family: "Cinzel Decorative", "neulis-neue", sans-serif;
      font-size:2.5rem;
      margin:0;
      line-height:1.05;
	  font-weight: 700;
      background: linear-gradient(90deg, #fffdf0 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    }
    .hero h2{
      font-family: "Marcellus", "neulis-neue", sans-serif;
      color: rgba(232,236,242,0.95);
      font-weight:900;
      margin:12px 0 18px;
      font-size:1.15rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    }
    .hero p{
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      max-width:880px;
      color: rgba(232,236,242,0.95);
      font-size:1.05rem;
      margin:0 auto 22px;
      line-height:1.7;
      text-align: center;
      font-weight:500;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
    }
    .hero .avatar{
      width:20rem;
      height:20rem;
      border-radius:50%;
      border: 0.2rem solid #333;
      box-shadow: 0 2rem 4rem rgba(14,30,60,0.18);
      margin-top:20px;
      background-size:cover;
      background-position:center;
    }
    .hero .hero-cta{margin-top:18px}
    .hero .hero-cta .btn{padding:14px 36px;font-size:1.05rem}

	.card-text {
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      max-width:880px;
      color: #333;
      font-size:1.05rem;
      margin: auto;
      line-height:1.7;
      text-align: center;
      font-weight:600;
      text-shadow: 1px 1px 2px rgba(51, 51, 51, 0.25);
	}

	.btn-text {
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      max-width:880px;
      font-size:1.5rem;
      margin: auto;
      line-height:1.7;
      text-align: center;
      font-weight:600;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	}
	
	.header-card-text {
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      max-width:880px;
      font-size:2rem;
      text-align: center;
      font-weight:600;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
	}

	.page-footer {
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      text-align: center;
      font-weight:600;
      font-size:1.05rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.20);
	}
    /* ---------- Sections general ---------- */
    .section-title{
	  font-family: "Marcellus", "neulis-neue", sans-serif;
      font-size:2rem;
      text-align:center;
      color:var(--primary-600);
      margin-bottom:28px;
      position:relative;
      font-weight:700;
      text-shadow: 2px 2px 4px rgba(127, 179, 246,0.7);
    }
    .section-title::after{
      content:'';
      width:72px;
      height:4px;
      background: linear-gradient(90deg,var(--primary), var(--primary-600));
      display:block;
      margin:12px auto 0;
      border-radius:4px;
    }

    /* Quem sou eu */
    .about .card{
      background:var(--surface);
      border-radius: var(--card-radius);
      padding:28px;
      box-shadow: var(--shadow-strong);
      max-width: 980px;
      margin: 0 auto;
    }
	
    .about p{
      font-family: "Marcellus", "neulis-neue", sans-serif;
	  font-size:1.05rem;
	  color:#333;
	  text-align:justify;
	  line-height:1.9;
	  margin:0;
	}

	/* */
	.whoami-grid{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap:18px;
      margin: auto;
    }
    .whoami-wrap{
	  width: 100%;
	  max-width: 100% !important; 
      margin: 0 auto;
      padding: 0 20vw !important;
    }

	.illustration_whoami_whoami{
		width: 60%;
		height: 35rem !important;
		object-fit: cover; /* cobre toda a largura mantendo proporção */
		object-position: bottom; /* alinha pela base */
		margin: auto;
		border-radius: 12px !important;
    }

    /* Para quem é / checks */
	.checks {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 40px;
		justify-content: center;
	}
	.illustration_whoami{
	  width: auto;
      height: 50vh !important;	
      display: block;
      margin: 0 0 0 auto;
    }
	.illustration{
	  width: auto;
      height: 50vh !important;	
      display: block;
      margin: 0 0 0 auto;
    }
    .checks .checks-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .check-item{
      display:flex;
      gap:12px;
      align-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.9));
      padding:14px 18px;
      border-radius:12px;
      margin: 0;
      box-shadow: 0 6px 18px rgba(22,40,80,0.03);
      border-left:6px solid var(--primary);
      font-weight:600;
      color:#223;
    }
    .check-item img{height:28px;width:auto}

    /* Pricing / Cards */
    .card-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:22px;
      max-width:1100px;
      margin: 0 auto;
    }
    .plan-card{
      background:var(--surface);
      border-radius:18px;
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      transition: transform .5s var(--ease), box-shadow .5s var(--ease);
      border: none;
    }
    .plan-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-strong); }
    .plan-head{
      padding:22px;
      background: linear-gradient(90deg, var(--primary), var(--primary-600));
      color:white;
      font-weight:800;
      text-align:center;
    }
    .plan-body{ padding:28px; text-align:center; }
    .plan-title{ font-size:2.3rem; color:var(--primary); font-weight:800; margin: 6px 0 12px; }
    .plan-desc{ color:#666; min-height:56px; margin-bottom:18px; }
    .plan-footer { background: linear-gradient(90deg, var(--primary), var(--primary-600)); padding:14px; text-align:center; font-size:0.9rem; color:#fff; }

    /* Benefits / grid */
    .benefits-grid{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:18px;
      max-width:1100px;
      margin:0 auto;
    }
    .benefit{
      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.9));
      padding:18px;
      border-radius:12px;
      border-left:6px solid var(--primary);
      font-weight:600;
      box-shadow: 0 6px 18px rgba(22,40,80,0.03);
    }

	html {
		overflow-x: hidden;
	}

    /* Footer */
	footer.page-footer {
		margin-top:40px;
		margin-bottom: 0 !important;
		padding:36px 0;
		background: linear-gradient(90deg, var(--primary-600), var(--primary));
		color:#fff;
		width: 100%;
		max-width: 100%;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
    footer .wrap{display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center}

    /* ---------- Responsividade ---------- */
    @media (max-width: 992px){
      .checks{ grid-template-columns: 1fr; }
      .card-grid{ grid-template-columns: repeat(2,1fr);}
      .whoami-grid{ grid-template-columns: repeat(1,1fr);}
      .benefits-grid{ grid-template-columns: repeat(2,1fr);}

      .illustration_whoami_whoami{
		width: 100% !important;
		height: 52vh !important;
		object-fit: cover; /* cobre toda a largura mantendo proporção */
		object-position: bottom; /* alinha pela base */
		margin: auto;
      }
	  
      .whoami-wrap{
		padding: 0 10vw !important;
      }

	  .brand .logo-mark{
		width: 7vh;
		height: 7vh;
	  }
    }

    @media (max-width: 680px){
      .nav-menu{ display:none; }
      .mobile-toggle{ display:inline-block; }
      .nav-cta .btn-ghost{ display:none; } /* escondo login como ghost para mobile, manter apenas CTA */
      .card-grid{ grid-template-columns: 1fr; }
      .whoami-grid{ grid-template-columns: 1fr; }	  
      .benefits-grid{ grid-template-columns: 1fr; }
      .hero h1{ font-size:1.8rem; }
      .hero p{ font-size:1rem; padding:0 6px }

      .illustration_whoami_whoami{
		width: 100% !important;
		height: 35vh !important;
		object-fit: cover; /* cobre toda a largura mantendo proporção */
		object-position: bottom; /* alinha pela base */
		margin: auto;
      }
	  
      .whoami-wrap{
		padding: 0 10vw !important;
      }

	  .brand .logo-mark{
		width: 7vh;
		height: 7vh;
	  }
    }

    /* Mobile slide-down menu */
    .mobile-menu{
      display:none;
      position:absolute;
      right:18px;
      top:64px;
      background:var(--surface);
      border-radius:12px;
      box-shadow: 0 20px 50px rgba(28,44,86,0.12);
      padding:10px;
      min-width:180px;
      z-index:1300;
    }
    .mobile-menu a{ display:block; padding:10px 12px; font-weight:700; color:#333 }
    .mobile-menu .mobile-cta{ padding:10px; display:flex; gap:8px; justify-content:center; }

    /* small helpers */
    .center{ text-align:center }
    .mt-8{ margin-top:32px }
    .mb-6{ margin-bottom:24px }

	.hero,
	.about,
	#target,
	#plans,
	#benefits,
	footer.page-footer {
			width: 100vw;                 /* fundo da seção ocupa toda a largura */
			max-width: 100vw;
			position: relative;
			left: 50%;
			right: 50%;
			margin-left: -50vw;           /* remove limites do container WordPress */
			margin-right: -50vw;
	}