/*
 Theme Name:   Blocksy Child
 Theme URI:    https://creativethemes.com/blocksy/
 Description:  A child theme for Blocksy
 Author:       Lou stuido
 Author URI:   https://yourwebsite.com
 Template:     blocksy
 Version:      1.0.0
 Text Domain:  blocksy-child
*/

/*
Theme Name: Blocksy Child
Template: blocksy
*/

/* --- CARICAMENTO FONT LOCALE --- */
/* prata-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prata-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* --- VARIABILI ROOT (DESIGN SYSTEM) --- */
:root {
    /* Font Families */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Prata', serif; /* Font per i titoli */
    
    /* Scale elastiche */
    --base-font-size: 100%; /* Base 16px */
    
    /* Spaziature e Layout */
    --container-max-width: 85rem;
    --lh-body: 1.6;
    --lh-heading: 1.2;
}

/* --- RESET & STRUTTURA ELASTICA --- */
html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary) !important;
    line-height: var(--lh-body);
    color: #000; /* Nero pieno per massimo contrasto tech */
    -webkit-font-smoothing: antialiased;
}


/* --- TIPOGRAFIA TITOLI (POPPINS) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    line-height: var(--lh-heading);
    color: #252525;
    margin-bottom: 1.5rem;
}

.main-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 2.2rem;
  color: #252525;
  font-weight: 700;
  letter-spacing: 0.02rem;
  text-align: justify;
}

.brand-emphasis {
    font-weight: 600 !important;
    /* letter-spacing: 0.02rem !important; */
    color: #252525 !important;
    /* Un tocco di classe: se vuoi che sia leggermente diverso dal testo attorno */
    font-style: normal; 
}

p.text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #222222;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  text-align: justify;
}
/* --- HELPER LAYOUT ELASTICO --- */
/* .loustudio-main-container {
    max-width: var(--container-max-width);
    min-height: 30vh;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
} */


#testo-scorre {
    overflow: hidden;
    white-space: nowrap;
}

#testo-scorre h2 {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


/* Contenitore principale */
.story-marea {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 2rem;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

/* Titolo MARÉA */
.story-marea-title h2 {
    font-family: 'Prata', serif;
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
    text-align: center;
    text-transform: uppercase;
    
    /* Gradiente coerente con il tuo stile */
    /*background: linear-gradient(90deg, #ff8c00, #ffdb00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

/* Corpo del testo */
.story-marea-text p {
    font-family: 'Poppins', sans-serif; /* O un font di sistema pulito */
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
}

/* Enfasi sulla parola MARÉA nel testo */
.story-marea strong {
    font-weight: 600;
    letter-spacing: 0.1rem;
    color: #222;
}

/* Separatore stilizzato tra i paragrafi principali */
.story-marea p:nth-of-type(3):after {
    content: "—";
    display: block;
    text-align: center;
    margin: 2rem 0;
    color: #ff8c00;
    font-style: normal;
}

/* Citazione finale (Il canto della sirena) */
.story-marea p:last-of-type {
    margin-top: 3rem;
    font-weight: 400;
    border-left: 3px solid #ffdb00;
    padding-left: 1.5rem;
}


/* Selettore specifico per l'intestazione dentro il tuo ID */
#cta-marea .elementor-heading-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.2rem; /* Approccio elastico */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18rem;
    text-align: center;
    margin: 0;
    padding: 1rem 0;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    color: #232323;
    /* Applicazione del tuo gradiente arancio-giallo 
    background: linear-gradient(90deg, #ff8c00, #ffdb00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Necessario per il gradiente e il bordo */
}

/* Contenitore per centrare l'elemento se necessario */
#cta-marea {
    text-align: center;
    padding: 2rem 0;
}

/* Effetto Hover raffinato */
#cta-marea .elementor-heading-title:hover {
    letter-spacing: 0.20rem; /* Si espande leggermente */
    opacity: 0.8;
    transform: translateY(-2px); /* Piccolo sollevamento tech */
}

/* Sottolineatura sottile coordinata */
#cta-marea .elementor-heading-title::after {
    content: '';
    display: block;
    width: 20%;
    height: 1px;
    background: #232323;
    margin: 8px auto 0;
    transition: width 0.4s ease;
}

#cta-marea .elementor-heading-title:hover::after {
    width: 60%; /* La linea si allunga al passaggio del mouse */
}

/* Contenitore principale per evitare lo scroll orizzontale della pagina */
.elementor-section, .elementor-container {
    overflow: hidden;
	position: relative;
}

.testo-scorrevole-bg {
	position: absolute !important;
    top: 50% !important;
	left: 0;   
    transform: translateY(-50%);
    width: 100%;
    white-space: nowrap;
    z-index: 0; /* Lo mette dietro le immagini */
    pointer-events: none; /* Permette di cliccare le immagini sopra */
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif; /* Per coerenza con il tuo stile */
    font-size: 5rem; /* Regola la dimensione */
    /*color: rgba(0,0,0,0.05); /* Colore tenue per l'effetto "dietro" */
    color: #252525;
    /* Animazione */
    animation: marquee-infinito 15s linear infinite;
}

/* Assicurati che le immagini stiano sopra */
.elementor-widget-image {
    z-index: 5;
    position: relative;
}

@keyframes marquee-infinito {
    0% { trasnform: translate3d(0, -50%, 0); }
    100% { transform: translate3d(-33,33%, -50%, 0); }
}












/* Blocca il testo su una sola riga */
.scrolling-container {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 15px 0;
    /* border-top: 1px solid #000;
    border-bottom: 1px solid #000; */
    display: flex;
}

.scrolling-content {
    display: flex;
    width: max-content;
    white-space: nowrap;
    /* L'ANIMAZIONE: 20 secondi, movimento lineare, infinita */
    animation: move-text 20s linear infinite;
}

.scrolling-content span {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    color: #000000;
    /* padding: 0 40px; Spazio tra le ripetizioni */
    text-transform: uppercase;
}

/* Definizione del movimento */
@keyframes move-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pausa al mouse */
.scrolling-container:hover .scrolling-content {
    animation-play-state: paused;
}



.s1-container-sparse {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.s1-box-img-sx {
  margin-top: 15%;
  max-width: 30%;
}
.s1-box-img-cx {
  margin-top: 10%;
  max-width: 30%;
}
.s1-box-img-sdx {
  margin-top: 25%;
  max-width: 30%;
}