/* BIO.ENERGIA / responsive repair - 12 novembre 2026
   Retains original brand, colors and section structure; fixes oversized headings and mobile layout. */
:root{--bio-blue:#159ad6;--bio-green:#65b861;--bio-text:#22272c;--bio-border:#e8eff1}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-width:320px;max-width:100%;overflow-x:clip;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
main{overflow:clip}
main .container, .footer .container{max-width:1160px;min-width:0}
main .row, .footer .row{min-width:0}
main .row > *, .footer .row > *{min-width:0}
main h1,main h2,main h3,main h4,main h5,main h6{max-width:100%;hyphens:auto;overflow-wrap:break-word;word-break:normal}
main h1{font-size:clamp(2.05rem,3.8vw,3.7rem);line-height:1.15}
main h2{font-size:clamp(1.65rem,2.8vw,2.65rem);line-height:1.2}
main h3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.28}
main p,main li{overflow-wrap:break-word;line-height:1.75}
main img{max-width:100%}
/* Hero headings: the old font-size:11vw/170px caused uncontrolled wrapping. */
main .banner{padding:clamp(54px,6vw,94px) 0 clamp(56px,6vw,96px);position:relative;isolation:isolate;overflow:hidden}
main .banner>.container{position:relative;z-index:2}
main .banner .row{display:flex;align-items:center;row-gap:35px}
main .banner .row>div{min-width:0}
main .banner .banner-huge{
  display:block;
  font-size:clamp(2.8rem,5.1vw,4.85rem);
  line-height:1.065;
  letter-spacing:-.057em;
  font-weight:800;
  margin:0;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:manual;
  text-wrap:balance;
}
main .banner .b_anner-title{font-size:clamp(1.7rem,3vw,2.85rem);line-height:1.19;letter-spacing:-.035em;margin:0 0 20px;text-wrap:pretty}
main .banner p{max-width:60ch;font-size:1.02rem;line-height:1.8;margin:0}
main .banner .banner-shape{position:absolute;width:min(30vw,410px);max-width:410px;height:auto;right:-6%;top:-75px;z-index:1;opacity:.3;pointer-events:none}
/* Sections, headline scale, breathing room */
main>.section{padding-top:70px;padding-bottom:76px}
main>section:not(.section):not(.page-hero){padding-top:45px;padding-bottom:52px}
main .section.services{padding-top:75px;padding-bottom:75px}
main .services .row{row-gap:30px}
main .services .row+.row{margin-top:80px}
main .services h2{font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.2}
main .text-container{max-width:100%;min-width:0}
main .typography{max-width:1160px}
main .typography h2{margin-top:36px;margin-bottom:16px;font-size:clamp(1.65rem,2.7vw,2.45rem)}
main .typography h3{margin-top:28px}
main .typography h4,main .typography h5{margin-top:24px}
main .typography ul,main .typography ol{margin:12px 0 26px;padding-left:1.4rem}
main .typography ul li{list-style:disc;margin-bottom:7px;padding-left:2px}
main .typography ol li{list-style:decimal;margin-bottom:7px;padding-left:2px}
main .typography :first-child{margin-top:0}
main .page-hero{padding-top:65px;padding-bottom:32px}
main .page-hero .page-hero-content{max-width:780px;margin-left:auto;margin-right:auto}
main .page-hero h1{text-wrap:balance}
main .key-feature-grid{align-items:stretch}
main .key-feature-grid>div{height:100%;min-height:0}
main .key-feature-grid h3{font-size:clamp(1.15rem,1.6vw,1.35rem)}
main .bg-gradient.row h2{font-size:clamp(1.9rem,3.1vw,3.2rem)}
main .bg-gradient.row{overflow:hidden}
main .form-control,main .btn{max-width:100%;min-width:0}
main .form-control{font-size:16px}
main .btn{min-height:46px;white-space:normal;text-align:center}
main a:focus-visible, .header a:focus-visible, .header label:focus-visible, main button:focus-visible{outline:3px solid #159ad6;outline-offset:3px}
.footer{padding-top:0}
.footer .row{row-gap:26px}
.footer .bio-company-lines{overflow-wrap:break-word}
.footer .footer-copyright{text-align:center}
.footer .row>div{min-width:0}
/* Tablet: avoid two extremely narrow hero columns. */
@media (max-width:1023px){
  main .banner{padding:55px 0 60px}
  main .banner .row{flex-direction:column;align-items:stretch;gap:18px}
  main .banner .row>div{width:100%;max-width:100%;flex:0 0 100%;padding-left:15px;padding-right:15px}
  main .banner .banner-huge{font-size:clamp(2.9rem,7vw,4.6rem);max-width:680px}
  main .banner .b_anner-title{font-size:clamp(1.75rem,3.4vw,2.5rem);max-width:700px}
  main .banner .banner-shape{width:min(42vw,340px);right:-7%;top:-50px;opacity:.2}
  main>.section{padding:55px 0}
  main .services .row+.row{margin-top:60px}
  main .key-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main .page-hero{padding:44px 0 24px}
  .footer .row > div{margin-top:12px}
}
@media (max-width:639px){
  .container{width:calc(100% - 34px)}
  main .banner{padding:34px 0 51px}
  main .banner .row{gap:24px}
  main .banner .row>div{padding-left:15px;padding-right:15px}
  main .banner .banner-huge{font-size:clamp(2.17rem,9.6vw,3.25rem);line-height:1.09;letter-spacing:-.052em;text-wrap:pretty}
  main .banner .b_anner-title{font-size:clamp(1.45rem,6.1vw,1.9rem);line-height:1.21;margin-bottom:14px}
  main .banner p{font-size:.98rem;line-height:1.65}
  main .banner .banner-shape{width:175px;right:-60px;top:-20px;opacity:.12}
  main>.section{padding:46px 0}
  main>section:not(.section):not(.page-hero){padding:30px 0}
  main .services .row+.row{margin-top:50px}
  main .services .row>div{flex:0 0 100%;max-width:100%}
  main .services .text-container{padding-top:0}
  main h1{font-size:clamp(1.85rem,7.4vw,2.3rem)}
  main h2,main .typography h2,main .services h2{font-size:clamp(1.55rem,6.4vw,1.95rem)}
  main h3{font-size:1.28rem}
  main .page-hero{padding:30px 0 20px}
  main .key-feature-grid{grid-template-columns:1fr;gap:16px}
  main .key-feature-grid>div{padding:22px}
  main .bg-gradient.row{padding:36px 18px 42px;border-radius:20px}
  main .bg-gradient.row h2{font-size:1.9rem}
  main .typography p,main .typography li{font-size:1rem;line-height:1.75}
  main .typography ul, main .typography ol{padding-left:1.3rem}
  .footer .row>div{margin-top:6px}
  .footer .footer-copyright{padding:22px 0 28px}
  #cookie-banner{max-height:55vh;overflow-y:auto}
}
@media (max-width:360px){
 main .banner .banner-huge{font-size:2rem;letter-spacing:-.04em}
 .navbar-brand img{max-width:155px!important}
 main .banner .b_anner-title{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}