*{
box-sizing: border-box;
}

:root {
--page-bg: #dfdcd5;
--beige-1: #bdb59c;
--beige-2: #aba07d;
--ink: #050505;
--line: #776f5d;
--panel-ratio: 0.47165;
--page-height-ratio: 0.70699;
}

html,
body {
margin: 0;
padding: 0;
background: var(--page-bg);
color: var(--ink);
font-family: 'Prompt', Arial, sans-serif;
}

body {
min-width: 320px;
}

h1 a, 
h1 a:visited, 
h1 a:hover, 
h1 a:active {
  color: inherit !important;          /* Mantiene l'esatto colore del testo dell'h1 */
  text-decoration: none !important;   /* Rimuove la sottolineatura */
  font-family: inherit !important;    /* Mantiene lo stesso font */
  font-size: inherit !important;      /* Mantiene la stessa dimensione del testo */
  font-weight: inherit !important;    /* Mantiene lo stesso spessore del testo */
  letter-spacing: inherit !important; /* Mantiene la stessa spaziatura tra le lettere */
  cursor: pointer;                    /* Trasforma il cursore in manina al passaggio del mouse */
}

.btn-download-pdf {
  display: inline-block;
  padding: 10px 22px;              /* Spaziatura interna proporzionata */
  margin-top: 10px;                 /* Distanza dalla scritta PRODOTTI */
  margin-bottom: 10px;              /* Distanza dai contenuti sottostanti */
  font-size: 15px;                  /* Dimensione del testo leggibile */
  font-weight: bold;                /* Testo in grassetto per dare risalto */
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff !important;        /* Testo bianco evidente */
  background-color: #2b5b84;        /* Colore primario in tonalità con il sito */
  border: 2px solid #2b5b84;
  border-radius: 6px;               /* Angoli leggermente arrotondati */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Effetto rilievo evidente */
  transition: all 0.3s ease;        /* Effetto di transizione fluida */
}

/* Effetto al passaggio del mouse (Hover da Computer) */
.btn-download-pdf:hover {
  background-color: #1e405e;        /* Tonalità più scura al passaggio del mouse */
  border-color: #1e405e;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);       /* Leggero sollevamento al passaggio */
}

/* Regolazione per Smartphone (Mobile) */
@media screen and (max-width: 768px) {
  .btn-download-pdf {
    display: block !important;
    width: 85% !important;          /* Larghezza ben visibile ed estesa su mobile */
    max-width: 320px !important;
    margin: 12px auto !important;   /* Centratura perfetta */
    font-size: 14px !important;     /* Proporzione testo ideale per schermi piccoli */
    padding: 12px 18px !important;
  }
}

.gian{
display: block;	
padding-left: 25px;
padding-right: 25px;
background-color: #ffffff;
padding-bottom: 50px;
padding-top: 40px;
}

.document {
width: 100%;
max-width: 1684px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, calc(min(100vw, 1684px) * var(--page-height-ratio)));
background: var(--page-bg);
overflow: hidden;
}



.panel {
position: relative;
min-width: 0;
height: calc(min(100vw, 1684px) * var(--page-height-ratio));
overflow: hidden;
}

.panel p,
.panel h1,
.panel h2,
.panel h3 {
margin: 0;
}

.page1-left,
.page1-right {
background: var(--page-bg);
}

.page1-center {
background: var(--beige-1);
}

.page2-left,
.page2-center {
background: var(--beige-2);
}

.page2-right {
background: var(--page-bg);
}

/* Pagina 1 / colonna sinistra */
.hero-photo {
 position: absolute;
 left: 5%;
 top: 25%;
 width: 90%;
 height: auto;
 display: block;
/*box-shadow: 0 2px 12px rgba(0, 0, 0, .45);*/
}

.left-box {
position: absolute;
left: 8.5%;
right: 9%;
bottom: 2.6%;
background: var(--beige-1);
padding: 7.5% 4.5%;
font-size: clamp(11px, 1.12vw, 19px);
line-height: 1.38;
font-weight: 400;
opacity: 0.9;
}

/* Pagina 1 / colonna centrale */
.line {
position: absolute;
left: 10%;
right: 10%;
height: 1px;
background: var(--line);
}

.line-top {
top: 10.2%;
}

.line-bottom {
bottom: 10.8%;
}

.company-block {
position: absolute;
top: 42%;
width: 100%;
text-align: center;
font-weight: 600;
}

.company-block h1 {
font-family: 'Anton', Impact, sans-serif;
/*font-size: clamp(28px, 3vw, 53px);
letter-spacing: -.6px;*/
}

.website {
font-size: clamp(18px, 2.3vw, 41px);
line-height: 1.18;
margin-top: .65em !important;
font-weight: 600;
}

.place {
font-size: clamp(17px, 2.15vw, 38px);
line-height: 1.15;
margin-top: .2em !important;
font-weight: 600;
}

/* Pagina 1 / colonna destra */
.logo {
position: absolute;
display: block;
}

.logo-p1 {
right: 3%;
top: 4%;
width: 90%;
height: auto;
}

.tank-wrap {
position: absolute;
left: 6%;
right: -1%;
top: 30%;
height: 42%;
}

.tank {
position: absolute;
width: 95%;
left: -9%;
top: 38%;
height: auto;
}

.control {
position: absolute;
width: 70%;
right: -12.5%;
top: 11%;
height: auto;
}

.rico-card {
position: absolute;
left: 16%;
right: 16%;
top: 70%;
background: var(--beige-1);
text-align: center;
padding: 5% 2% 4%;
opacity: 0.9;
}

.rico-card h2 {
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(27px, 2.8vw, 50px);
line-height: 1;

}

.rico-card p {
font-size: clamp(13px, 1.55vw, 28px);
line-height: 1.15;
margin-top: .3em !important;
}

.right-intro {
position: absolute;
left: 5.8%;
right: 4.5%;
bottom: 1.8%;
background: var(--beige-1);
padding: 4.8% 2.6%;
font-size: clamp(11px, 1.18vw, 20px);
line-height: 1.38;
opacity: 0.9;
}

/* Pagina 2 / colonna sinistra */
.text-top {
position: absolute;
left: 6%;
right: 50%;
top: 3%;
font-size: clamp(10px, 1.05vw, 18px);
line-height: 1.33;
}

.text-top h2 {
font-size: 1.07em;
font-weight: 400;
}

.text-top h3 {
font-weight: 400;
margin-top: 1.55em !important;
margin-bottom: .1em !important;
}

.text-top ul {
margin: .05em 0 1.2em 0;
padding-left: 1.05em;
}

.text-top li {
margin: 0 0 .08em 0;
}

.text-top .long-copy {
margin-top: 1.25em !important;
}

.small-photo {
position: absolute;
display: block;
/*box-shadow: 0 1px 8px rgba(0, 0, 0, .45);*/
}

.photo-a {
right: 5%;
top: 13%;
width: 45%;
}

.photo-b {
right: 5%;
top: 50%;
width: 43%;
}

.photo-c {
right: 5%;
top: 82%;
width: 43%;
}

/* Pagina 2 / colonna centrale */
.logo-p2 {
left: 4%;
top: 3.5%;
width: 92%;
height: auto;
}

.machine {
position: absolute;
left: -30%;
top: 10%;
width: auto;
height: auto;
}

.machine-copy {
position: absolute;
left: 9%;
right: 8%;
top: 63%;
font-size: clamp(14px, 1.47vw, 25px);
line-height: 1.29;
}

.machine-copy p {
margin: 0;
}

/* Pagina 2 / colonna destra */
.cooling-title {
position: absolute;
left: 4%;
right: 3%;
top: 22%;
font-size: clamp(14px, 1.52vw, 26px);
line-height: 1.18;
}

.graph {
position: absolute;
left: 6%;
right: 5%;
top: 31%;
width: 89%;
height: auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

.cooling-copy {
position: absolute;
left: 5%;
right: 4%;
top: 57%;
font-size: clamp(15px, 1.55vw, 27px);
line-height: 1.28;
font-weight: 400;
}

.cooling-copy p+p {
margin-top: 1em;
}

@media (max-width: 900px) {
.document {
max-width: none;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
}

.panel {
height: auto;
aspect-ratio: var(--panel-ratio);
}

.hero-photo {
top: 20%;
}

.company-block {
top: 40%;
}

.text-top {
font-size: clamp(14px, 3vw, 20px);
}

.left-box {
font-size: clamp(14px, 3.2vw, 20px);
}

.right-intro {
font-size: clamp(14px, 3.3vw, 21px);
}

.cooling-title {
font-size: clamp(16px, 4vw, 24px);
}

.cooling-copy {
font-size: clamp(17px, 4vw, 26px);
}
}

@media (min-width: 901px) and (max-width: 1200px) {
.text-top {
font-size: 1.02vw;
}

.left-box {
font-size: 1.04vw;
}

.right-intro {
font-size: 1.08vw;
}

.machine-copy {
font-size: 1.34vw;
}
}

/*SPOSTAMENTO COLONNE E LOGO*/
@media only screen and (min-width: 769px) and (max-width: 900px) {
	
.line.line-top{
	display: none;
}	
.max5{
max-height: 1200px;
width: 100%;
}	


.max3{
max-height: 1400px;
width: 100%;
}
.hero-photo {
        top: 0%;
    }
	

.tank-wrap {
   
    
    top: 0;
    
}
}

@media screen and (max-width: 768px) {
  
.line.line-top{
	display: none;
}
.right-intro {

    bottom: 7.8%;
   
}

.max2{
max-height: 320px;
width: 100%;	
}


.max3{
max-height: 500px;
width: 100%;	
}

.max4{
max-height: 450px;
width: 100%;	
}

.max5{
max-height: 470px;
width: 100%;
}
.tank-wrap {
   
    
    top: 0;
    
}
.rico-card {

    top: 51%;

}
.hero-photo {
        top: 0%;
    }
	
	
	.left-box {
    position: absolute;
   
    bottom: .6%;
   
}

.alza {
        height: 1300px;
		width: 100%;
       
    }

.machine {
    position: absolute;
    left: 0%;
    top: 0%;
    width: auto;
    height: auto;
	width: 100%;
}


.machine-copy {
   
    top: 54%;
   
}

.cooling-title {
  
    top: 15%;

}

.cooling-copy {
  
    top: 68%;
   
}

}