/* Rifinha do Bem - Como funciona cinematografico */
#como{position:relative;overflow:hidden;background:radial-gradient(circle at 42% 4%,rgba(232,187,66,.20),transparent 20%),radial-gradient(circle at 82% 34%,rgba(27,151,75,.14),transparent 28%),linear-gradient(145deg,#031f16 0%,#053822 44%,#02160f 100%)!important;color:#fff;border-top:1px solid rgba(222,177,54,.22);border-bottom:1px solid rgba(222,177,54,.22)}
#como:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;background:radial-gradient(circle at 8% 78%,rgba(235,190,62,.7) 0 1px,transparent 2px),radial-gradient(circle at 92% 23%,rgba(235,190,62,.55) 0 1px,transparent 2px),radial-gradient(circle at 70% 82%,rgba(235,190,62,.45) 0 1px,transparent 2px);background-size:190px 190px,230px 230px,270px 270px}
#como:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-120px;height:240px;pointer-events:none;border-top:1px solid rgba(224,177,47,.38);border-radius:50%;box-shadow:0 -22px 80px rgba(213,167,44,.08);transform:rotate(-2deg)}
#como .wrap{position:relative;z-index:2}
#como .eyebrow{color:#e4bc53;letter-spacing:.24em;font-size:12px}
#como h2{color:#fff;font-size:46px;line-height:1.08;max-width:1100px;text-shadow:0 2px 24px rgba(0,0,0,.2)}
#como h2 .gold-title{color:#e6bd55;text-shadow:0 0 22px rgba(226,181,67,.16)}
#como h2::after{content:"";display:block;width:82px;height:3px;margin:26px 0 0 14px;border-radius:999px;background:linear-gradient(90deg,#9b6a10,#f4d77c,#b77b17);box-shadow:0 0 18px rgba(239,198,87,.58)}
#como .lead{color:#d5e4da;max-width:700px}
#como .steps{gap:20px;margin-top:40px}
#como .step{position:relative;overflow:hidden;min-height:290px;padding:28px 26px 26px;background:linear-gradient(155deg,rgba(8,68,41,.82),rgba(2,32,22,.92));border:1px solid rgba(232,190,72,.64);border-radius:26px;box-shadow:0 24px 54px rgba(0,0,0,.27),0 0 24px rgba(209,160,37,.07),inset 0 1px 0 rgba(255,255,255,.055),inset 0 0 32px rgba(228,183,65,.025);backdrop-filter:blur(5px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
#como .step:hover{transform:translateY(-5px);border-color:rgba(248,212,112,.9);box-shadow:0 30px 64px rgba(0,0,0,.34),0 0 34px rgba(225,176,53,.15),inset 0 1px 0 rgba(255,255,255,.08)}
#como .step:after{content:"";position:absolute;left:12%;right:12%;height:2px;bottom:0;background:linear-gradient(90deg,transparent,#f2ce69,transparent);box-shadow:0 0 16px #e7ba46,0 -5px 20px rgba(226,181,67,.22)}
#como .num{width:52px;height:52px;background:linear-gradient(145deg,#0b6737,#043b25);color:#fff4c4;border:1px solid #e8c45b;box-shadow:0 0 0 4px rgba(232,196,91,.06),0 0 24px rgba(235,191,62,.3);font-size:20px}
#como .step:before{content:"";position:absolute;right:28px;top:28px;width:58px;height:58px;background-repeat:no-repeat;background-position:center;background-size:48px 48px;filter:drop-shadow(0 0 10px rgba(231,188,75,.18));opacity:.96}
#como .step:nth-child(1):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e7bd52' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h8l5 27h27l6-20H20'/%3E%3Ccircle cx='27' cy='50' r='3'/%3E%3Ccircle cx='47' cy='50' r='3'/%3E%3C/svg%3E")}
#como .step:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e7bd52' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='28' width='36' height='27' rx='5'/%3E%3Cpath d='M22 28v-9c0-8 5-13 10-13s10 5 10 13v9'/%3E%3Ccircle cx='32' cy='41' r='3'/%3E%3Cpath d='M32 44v5'/%3E%3C/svg%3E")}
#como .step:nth-child(3):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e7bd52' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='8' width='33' height='46' rx='4'/%3E%3Cpath d='M17 18h18M17 27h14M17 36h10'/%3E%3Cpath d='M36 46l14-14 6 6-14 14-8 2z'/%3E%3C/svg%3E")}
#como .step:nth-child(4):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e7bd52' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='32' r='6'/%3E%3Ccircle cx='48' cy='15' r='6'/%3E%3Ccircle cx='48' cy='49' r='6'/%3E%3Cpath d='M22 29l20-11M22 35l20 11'/%3E%3C/svg%3E")}
#como .step h3{color:#fff;font-size:20px;margin-top:24px}
#como .step p{color:#cbdad1;font-size:14px;line-height:1.68}
@media(max-width:800px){
  .hero{
    padding:44px 24px 150px!important;
    min-height:auto!important;
    background-size:auto 100%!important;
    background-position:65% center!important;
  }
  .hero h1{font-size:40px!important;line-height:1.06!important}
  .hero p{font-size:17px!important;line-height:1.55!important}
  .hero .actions{margin-top:24px!important;gap:10px!important}
  .hero .primary,.hero .secondary{padding:15px 18px!important}
  #como{padding-top:62px;padding-bottom:64px}
  #como h2{font-size:34px}
  #como h2::after{margin-left:0}
  #como .steps{grid-template-columns:1fr}
  #como .step{min-height:220px}
}