@import url("https://use.typekit.net/uxt7dte.css");

:root {
  --white: #FFFEFA;
  --black: #1a1a18;
  --lightblue: #007dc8;
  --blue: #1e274a;
  --red: #d23200;
  --cream: #F0E1C8;
  --lightcream: #FFF7EA;
}

@font-face {
  font-family: 'BefterSans';
  src:  url('../fonts/Befter/BefterSansSemiBold/font.woff2') format('woff2'),
        url('../fonts/Befter/BefterSansSemiBold/font-woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'BefterSans';
  src:  url('../fonts/Befter/BefterSansBold/font.woff2') format('woff2'),
        url('../fonts/Befter/BefterSansBold/font-woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'BefterSans';
  src:  url('../fonts/Befter/BefterSansHeavy/font.woff2') format('woff2'),
        url('../fonts/Befter/BefterSansHeavy/font-woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'BefterSans';
  src:  url('../fonts/Befter/BefterSansHeavyItalic/font.woff2') format('woff2'),
        url('../fonts/Befter/BefterSansHeavyItalic/font-woff') format('woff');
  font-weight: 900;
  font-style: italic;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; overflow-x:hidden; background:var(--cream); font-size: var(--basefontsize); font-family: 'phoreuscherokee'; font-weight: 400; color: var(--black);}

/* COLOR White*/
.colorWhite,
.hoverColorWhite:hover {
  color: var(--white);
}
.bgColorWhite,
.hoverBgColorWhite:hover {
  background: var(--white);
}
.borderWhite,
.hoverBorderWhite:hover {
  border-color: var(--white);
}
.beforeWhite::before,
.hoverBeforeWhite:hover::before {
  background: var(--white);
}
.afterWhite::after,
.hoverAfterWhite:hover::after {
  background: var(--white);
}

/*FINE COLOR White*/
/*FINE COLOR Green*/

/* COLOR Cream*/
.colorCream,
.hoverColorCream:hover {
  color: var(--cream);
}
.bgColorCream,
.hoverBgColorCream:hover {
  background: var(--cream);
}
.borderCream,
.hoverBorderCream:hover {
  border-color: var(--cream);
}
.beforeCream::before,
.hoverBeforeCream:hover::before {
  background: var(--cream);
}
.afterCream::after,
.hoverAfterCream:hover::after {
  background: var(--cream);
}
/*FINE COLOR Cream*/

/* COLOR LightCream*/
.colorLightcream,
.hoverColorLightcream:hover {
  color: var(--lightcream);
}
.bgColorLightcream,
.hoverBgColorLightcream:hover {
  background: var(--lightcream);
}
.borderLightcream,
.hoverBorderLightcream:hover {
  border-color: var(--lightcream);
}
.beforeLightcream::before,
.hoverBeforeLightcream:hover::before {
  background: var(--lightcream);
}
.afterLightcream::after,
.hoverAfterLightcream:hover::after {
  background: var(--lightcream);
}
/*FINE COLOR LightCream*/

/* COLOR Blue*/
.colorBlue,
.hoverColorBlue:hover {
  color: var(--blue);
}
.bgColorBlue,
.hoverBgColorBlue:hover {
  background: var(--blue);
}
.borderBlue,
.hoverBorderBlue:hover {
  border-color: var(--blue);
}
.beforeBlue::before,
.hoverBeforeBlue:hover::before {
  background: var(--blue);
}
.afterBlue::after,
.hoverAfterBlue:hover::after {
  background: var(--blue);
}
/*FINE COLOR Blue*/

/* COLOR Lightblue*/
.colorLightblue,
.hoverColorLightblue:hover {
  color: var(--lightblue);
}
.bgColorLightblue,
.hoverBgColorLightblue:hover {
  background: var(--lightblue);
}
.borderLightblue,
.hoverBorderLightblue:hover {
  border-color: var(--lightblue);
}
.beforeLightblue::before,
.hoverBeforeLightblue:hover::before {
  background: var(--lightblue);
}
.afterLightblue::after,
.hoverAfterLightblue:hover::after {
  background: var(--lightblue);
}

/*FINE COLOR Lightblue*/

/* COLOR Red*/
.colorRed,
.hoverColorRed:hover {
  color: var(--red);
}
.bgColorRed,
.hoverBgColorRed:hover {
  background: var(--red);
}
.borderRed,
.hoverBorderRed:hover {
  border-color: var(--red);
}
.beforeRed::before,
.hoverBeforeRed:hover::before {
  background: var(--red);
}
.afterRed::after,
.hoverAfterRed:hover::after {
  background: var(--red);
}
/*FINE COLOR Red*/

/* COLOR Black*/
.colorBlack,
.hoverColorBlack:hover {
  color: var(--black);
}
.bgColorBlack,
.hoverBgColorBlack:hover {
  background: var(--black);
}
.borderBlack,
.hoverBorderBlack:hover {
  border-color: var(--black);
}
.beforeBlack::before,
.hoverBeforeBlack:hover::before {
  background: var(--black);
}
.afterBlack::after,
.hoverAfterBlack:hover::after {
  background: var(--black);
}
/*FINE COLOR Black*/

.titleLev1{
  font-family: 'BefterSans';
  font-weight: 900;
  line-height: 1em;
  text-transform: uppercase;
}
.titleLev2{
  font-family: 'BefterSans';
  font-weight: 900;
  line-height: 1.2em;
  text-transform: uppercase;
}
.titleLev3{
  font-family: 'BefterSans';
  font-weight: 900;
  line-height: 1em;
  text-transform: uppercase;
}
.titleLev4 {
  font-family: 'BefterSans';
  font-weight: 700;
  line-height: 1.2em;
}
.titleLev5{
  font-family: 'phoreuscherokee';
  font-weight: 700;
  line-height: 1.2em;
}
.titleLev5Alternative{
  font-family: 'BefterSans';
  font-weight: 500;
  line-height: 1.2em;
}
.titleLev6{
  font-family: 'phoreuscherokee';
  font-weight: 700;
}

.titleLev1 > span, .titleLev2 > span, .titleLev3 > span, .titleLev4 > span{
  font: inherit;
}

.customBtn {
  cursor: pointer;
  display: inline-block;
  padding: .71em .77rem;
  -webkit-transition: color .3s, background .3s;
  -moz-transition: color .3s, background .3s;
  -ms-transition: color .3s, background .3s;
  -o-transition: color .3s, background .3s;
  transition: color .3s, background .3s;
  font-family: "BefterSans";
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
}

/* HERO */
.hero {
  position:relative;
  width:100%;
  height:100svh;
  min-height:500px;
  overflow:hidden;
  background: var(--black);
}
.hero video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.82;
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.6) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem;
  text-align:center;
}

/* LOGOS in hero */
.hero-logos {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(1rem, 4vw, 1.6rem);
  margin-bottom: clamp(1.6rem, 5vw, 2.4rem);
  opacity:0;
  animation:fadeUp .8s ease forwards .3s;
}
.logo-pescaria {
  width: clamp(120px, 36vw, 155px);
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}
.logo-altograno {
  width: clamp(88px, 27vw, 115px);
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}

.logo-divider {
  width:1px;
  height: clamp(32px, 10vw, 46px);
  background:rgba(255,255,255,.45);
  flex-shrink:0;
}

.hero-headline {
  line-height:1.05;
  color:var(--white);
  text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
  opacity:0;
  animation:fadeUp .9s ease forwards .7s;
}

/* SCROLL ARROW */
.scroll-hint {
  position:absolute;
  bottom:1.8rem;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  animation:fadeIn 1s ease forwards 1.6s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.scroll-arrow {
  width:18px;
  height:18px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg);
  animation:bounce 1.4s ease-in-out infinite;
}

/* WAVE BORDERS — tight scallop like the flyer */
.wave-wrap { display:block; width:100%; overflow:hidden; line-height:0; background-color: var(--cream); background-image: url('/assets/ondina.svg'); height: 2rem;}
.wave-wrap.revert { transform: rotate(180deg)}

/* CONTENT */
.content-section { background:var(--cream); }
.content-inner {
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1rem, 4vw, 1.4rem);
  width:100%;
  max-width:540px;
  margin:0 auto;
}

/* CARD */
.card {
  margin-bottom: clamp(2.4rem, 7vw, 3.2rem);
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.card.visible { opacity:1; transform:translateY(0); }

.card-img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:3px;
  box-shadow:0 6px 28px rgba(30,39,74,.18);
}
.card-text { padding: clamp(1rem, 3.5vw, 1.4rem) 0 0; }

.card-divider {
  width:36px;
  height:3px;
  background:var(--blue);
  margin-bottom:.9rem;
  border-radius:2px;
}
.card-title {
  line-height:1.05;
  text-transform:uppercase;
  color:var(--lightblue);
  letter-spacing:-.01em;
  margin-bottom:.85rem;
}
.card-body {
  line-height:1.68;
  color:var(--navy);
}
.card-body strong { font-weight:600; }
.card-body .closing {
  display:block;
  margin-top:.8rem;
  font-weight:600;
}

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }

/* FOOTER */
.footer {
  background:#1e274a;
  padding: clamp(1.4rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(1.2rem, 5vw, 2.4rem);
}
.footer .logo-p {
  width: clamp(100px, 33vw, 150px);
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}
.footer .logo-a {
  width: clamp(80px, 25vw, 115px);
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}

/* ── RESPONSIVE ── */


@media(max-width: 1799px){
  .titleLev1 {
    font-size: 5rem;
  }
  
  .titleLev2 {
    font-size: 1.7rem;
  }

  .titleLev5, .titleLev5Alternative {
    font-size: 1.3rem;
  }
}

/* max lg */
@media (max-width: 1199px){

  .titleLev2 {
    font-size: 3.2rem;
  }

  .titleLev3 {
    font-size: 2rem;
  }

  .titleLev4 {
    font-size: 1.65rem;
  }

  .titleLev5, .titleLev5Alternative {
    font-size: 1.29rem;
  }
}

/* xs, sm*/
@media (max-width: 767px){

  :root{
    --basefontsize: 17px;
  }
  .titleLev1 {
    font-size: 3.5rem;
  }

  .titleLev2 {
    font-size: 2.11rem;
  }

  .titleLev3 {
    font-size: 1.29rem;
  }

  .titleLev4 {
    font-size: 1.29rem;
  }

  .titleLev5, .titleLev5Alternative {
    font-size: 1rem;
  }
}

/* Piccoli (≤360px — es. iPhone SE) */
@media (max-width:360px) {
  .logo-pescaria { width:120px; }
  .logo-altograno { width:88px; }
  .logo-divider { height:34px; }
  .hero-logos { gap:1rem; }
}

/* Medi (375–414px — iPhone standard) */
@media (min-width:375px) and (max-width:414px) {
  .logo-pescaria { width:138px; }
  .logo-altograno { width:100px; }
}

/* Grandi (≥415px — iPhone Plus / Pro Max, Android large) */
@media (min-width:415px) {
  .logo-pescaria { width:160px; }
  .logo-altograno { width:118px; }
  .content-inner { padding:2.8rem 1.6rem; }
}

/* Tablet (≥600px) */
@media (min-width:600px) {
  .content-inner { max-width:560px; padding:3rem 2rem; }
  .hero-logos { gap:2rem; }
  .logo-pescaria { width:180px; }
  .logo-altograno { width:130px; }
  .logo-divider { height:50px; }
}

@media (min-width:768px) {
  :root{
    --basefontsize: 18px;
  }
}

/* lg */
@media (min-width: 992px) {
  :root{
    --basefontsize: 20px;
  }
}

/* xl */
@media (min-width: 1200px){

  .titleLev3 {
    font-size: 1.9rem;
  }

  .titleLev4 {
    font-size: 1.42rem;
  }

  .titleLev6 {
    font-size: 1rem;
  }
}

/* xxl */
@media (min-width: 1800px){
  :root{
    --basefontsize: 21px;
  }

  .titleLev1 {
    font-size: 8.57rem;
  }

  .titleLev2 {
    font-size: 3rem;
  }

}

/* xxxl */
@media (min-width: 2600px){
  :root{
    --basefontsize: 28px;
  }
}