/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* HEADER – FIXED 72PX ALWAYS */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 72px;
    background-color: #F6CFD8;
    z-index: 10;
}

/* NAV – FIXED 72PX ALWAYS */
.nav {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 47px;
    position: relative;
}

/* MENU LINKS */
.nav-list {
    list-style: none;
    display: flex;
    gap: 120px;
}

.nav-list li {
    display: flex;
    align-items: center;
}

.nav a {
    display: block;
    text-align: center; /* centered text */
    font-family: "miller-banner-condensed", serif;
    font-size: 40px;
    line-height: 31%;
    color: #590F15;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: #403C04;
}

/* BURGER */
.burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    left: 47px;
    height: 72px;
}

.burger span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px 0;
    background-color: #590F15;
    transition: background-color 0.3s ease;
}

.burger:hover span {
    background-color: #403C04;
}

/* HERO */
.hero {
    height: 830px;
    background: url("../assets/Foto_1.jpg") center / cover no-repeat;
    position: relative;
}

.hero-text {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #590F15;
}

.script {
    font-family: "Pinyon Script", cursive;
    font-size: 326px;
    line-height: 50%;
}

.title {
    font-family: "miller-banner-condensed", serif;
    font-size: 322px;
    line-height: 70%;
}

/* INTRO */
.intro {
    height: 180px;
    background-color: #403C04;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 0;
}

.intro-box {
    width: 686px;
    text-align: center;
}

.intro p {
    font-size: 26px;
    line-height: 100%;
    color: #403C04;
}

.intro-regular {
    font-family: "miller-banner", serif;
    font-weight: 400;
}

.intro-italic {
    font-family: "miller-banner", serif;
    font-style: italic;
    font-weight: 400;
}

.intro-mobile { display: none; }

/* TABLET */
@media (max-width: 1023px) {
    .hero { height: 710px; }
    .script { font-size: 216px; }
    .title { font-size: 222px; }
}

/* MOBILE */
@media (max-width: 475px) {
    .hero { height: 554px; }
    .script { font-size: 90px; }
    .title { font-size: 96px; }

    .nav-list { display: none; }
    .burger { display: block; }

    .intro {
        height: auto;
        padding: 32px 24px;
    }

    .intro-box { width: 100%; }

    .intro-desktop { display: none; }
    .intro-mobile { display: block; }
}


/* === ZIP1 SECTIONS 3 & 4 === */
*{margin:0;padding:0;box-sizing:border-box}

/* HEADER */
.header{position:fixed;top:0;width:100%;height:72px;background:#F6CFD8;z-index:10}
.nav{height:72px;display:flex;justify-content:center;align-items:center;padding:0 47px}
.nav-list{list-style:none;display:flex;gap:120px}
.nav-list li{list-style:none}
.nav a{font-family:"miller-banner-condensed",serif;font-size:40px;line-height:31%;color:#590F15;text-decoration:none}
.nav a:hover{color:#BFB063}

/* Remove focus/active outlines causing white circle */
.nav a:focus,
.nav a:active,
.burger:focus,
.burger:active{
outline:none;
box-shadow:none;
}

/* HERO */
.hero{height:830px;background:url("../assets/Foto_1.jpg") center/cover no-repeat;position:relative}
.hero-text{position:absolute;bottom:0;left:0;color:#590F15}
.script{font-family:"Pinyon Script",cursive;font-size:326px;line-height:50%}
.title{font-family:"miller-banner-condensed",serif;font-size:322px;line-height:70%}

/* INTRO */
.intro{height:180px;background:#BFB063;display:flex;justify-content:center;align-items:center}
.intro-box{width:686px;text-align:center;font-family:"miller-banner",serif;font-size:26px;color:#403C04}
.intro-mobile{display:none}

/* SEASON */
.season{background:#F7CDDA;padding:60px}
.season-title{font-family:"miller-banner-condensed",serif;font-weight:600;font-size:85px;color:#590F15;margin-bottom:60px;text-align:center}

.season-cards{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}

.season-card{
width:360px;
opacity:0.1;
transform:translateY(50px);
transition:opacity 600ms ease-out, transform 600ms ease-out;
}

.season-card.in-view{opacity:1;transform:translateY(0)}
.season-card img{width:100%;border-radius:20px}
.card-text{padding:30px 20px 20px}
.card-text h3{font-family:"miller-banner",serif;font-size:40px;color:#590F15}
.card-text p{font-family:"Mulish",sans-serif;font-size:22px;color:#590F15}

@media(max-width:1023px){
.season-title{font-size:60px}
.season-cards{overflow-x:auto;flex-wrap:nowrap;gap:70px;padding:0 20px;justify-content:flex-start}
.season-card{min-width:320px}
}

@media(max-width:475px){
.season-title{font-size:48px;text-align:left}
.season-cards{overflow-x:auto;gap:0;padding:0 20px}
.season-card{min-width:280px}
}

/* ==================================================
   SECTION 4 – SIGNIFICADOS (FINAL CORRECT)
================================================== */

.significados-title-wrapper{
  position:relative;
  height:0;
  z-index:50;
}

.significados-title{
  position:absolute;
  left:50%;
  top:-120px;
  transform:translateX(-50%);
  font-family:'Pinyon Script',cursive;
  font-size:200px;
  color:#BFB063;
  background:transparent;
  pointer-events:none;
}

.significados{
  height:514px;
  background:#403C04;
  position:relative;
  padding-top:125px; /* exact gap to carousel */
  overflow:hidden;
}

.significados-carousel{
  display:flex;
  gap:19px;
  overflow-x:auto;
  padding:25px 0 0 46px;
}

.significado-card{
  width:280px;
  height:280px;
  border-radius:20px;
  overflow:hidden;
  flex-shrink:0;
  position:relative;
}

.significado-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.significado-card .overlay{
  position:absolute;
  inset:0;
  background:rgba(191,176,99,0.8);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  opacity:0;
  transition:300ms ease-out;
}

.significado-card:hover .overlay{opacity:1;}

.significado-card h3{
  font-family:'Miller Banner',serif;
  font-size:40px;
}

.significado-card p{
  font-family:'Mulish',sans-serif;
  font-size:22px;
}

/* === FIX SIGNIFICADOS TITLE ANIMATION === */
.significados-title{
  opacity:0;
  transition:opacity 1321ms ease-out;
}
.significados-title.is-visible{
  opacity:1;
}

/* === FIX DUPLICATE SIGNIFICADOS TITLE === */
/* Ensure only the floating title is visible */
.significados h2.significados-title{
  display:none !important;
}

/* === FIX SIGNIFICADOS BLEED / DUPLICATE LOOK === */
/* Mask underlying section so text from section 3 never shows through */
.significados-floating-wrapper{
  position: relative;
  z-index: 20;
}

.significados-floating-wrapper::before{
  content: "";
  position: absolute;
  inset: -40px 0;
  background: linear-gradient(
    to bottom,
    #F7CDDA 0%,
    #F7CDDA 50%,
    #403C04 50%,
    #403C04 100%
  );
  z-index: -1;
}

/* === FORCE FIX SIGNIFICADOS DUPLICATION === */

/* Prevent section 3 content from bleeding upward */
.section-3{
  position: relative;
  overflow: hidden;
}

/* Absolute floating title layer */
.significados-floating-wrapper{
  position: relative;
  z-index: 999;
}

/* Solid mask behind title */
.significados-floating-wrapper::before{
  content: "";
  position: absolute;
  inset: -80px 0;
  background: #BFB063;
  z-index: -1;
}

/* Extra safety: hide any other Significados text */
h2.significados,
h1.significados{
  display: none !important;
}

/* === RESPONSIVE FIX FOR FLOATING SIGNIFICADOS TITLE === */

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px){
  .significados-floating-wrapper .significados-title{
    font-size: 134px;
  }
}

/* Mobile */
@media (max-width: 767px){
  .significados-floating-wrapper .significados-title{
    font-size: 70px;
  }
}

/* =======================================================
   FIX 1: FLOATING 'SIGNIFICADOS' RESPONSIVE SIZES (FORCED)
   ======================================================= */
.significados-title{
  font-size: 200px;
}

@media (max-width:1023px){
  .significados-title{
    font-size:134px !important;
  }
}

@media (max-width:767px){
  .significados-title{
    font-size:70px !important;
  }
}

/* =======================================================
   FIX 2: SECTION 1 HERO TYPO RESPONSIVE (RESTORED)
   ======================================================= */

/* Tablet */
@media (max-width:1023px) and (min-width:768px){
  .hero-title-pinyon{
    font-size:216px !important;
  }
  .hero-title-miller{
    font-size:222px !important;
  }
}

/* Mobile */
@media (max-width:767px){
  .hero-title-pinyon{
    font-size:116px !important;
  }
  .hero-title-miller{
    font-size:122px !important;
  }
}

/* =======================================================
   SECTION 1 – HERO RESPONSIVE (FORCED AS REQUESTED)
   ======================================================= */

/* Tablet */
@media (max-width:1023px) and (min-width:768px){
  .hero-title-pinyon{
    font-size:216px !important;
    line-height:1;
  }
  .hero-title-miller{
    font-size:222px !important;
    line-height:1;
  }
}

/* Mobile */
@media (max-width:767px){
  .hero-title-pinyon{
    font-size:116px !important;
    line-height:1;
  }
  .hero-title-miller{
    font-size:122px !important;
    line-height:1;
  }
}

/* =======================================================
   SIGNIFICADOS TITLE – RESPONSIVE POSITION FIX
   ======================================================= */

/* Desktop already OK */

/* Tablet */
@media (max-width:1023px){
  .significados-title{
    top:-90px !important;
  }
}

/* Mobile */
@media (max-width:767px){
  .significados-title{
    top:-60px !important;
    left:20px !important;
    transform:none !important;
  }
}


/* =======================================================
   RESPONSIVE FIX – REAL CLASS NAMES (FINAL)
   ======================================================= */

/* Tablet */
@media (max-width:1023px){
  .hero .script{
    font-size:216px;
  }
  .hero .title{
    font-size:222px;
  }
}

/* Mobile */
@media (max-width:475px){
  .hero .script{
    font-size:116px;
  }
  .hero .title{
    font-size:122px;
  }

  .intro-desktop{
    display:none;
  }
  .intro-mobile{
    display:block;
  }
}

/* =======================================================
   HERO TITLE SIZE UPDATE (SCRIPT UNTOUCHED)
   ======================================================= */

/* Desktop */
.hero .title{
  font-size:322px;
}

/* Tablet */
@media (max-width:1023px){
  .hero .title{
    font-size:142px;
  }
}

/* Mobile */
@media (max-width:475px){
  .hero .title{
    font-size:72px;
  }

  /* Mobile menu: hide text, show hamburger */
  .nav-list{
    display:none;
  }

  .burger{
    display:flex;
  }
}

/* =======================================================
   HERO TEXT LAYOUT + MOBILE MENU (FINAL)
   ======================================================= */

/* Force hero text always in two lines */
.hero .hero-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero .script,
.hero .title{
  display:block;
  width:100%;
}

/* Mobile menu: hide text, show hamburger ONLY */
@media (max-width:475px){
  .nav-list{
    display:none;
  }

  .burger{
    display:flex;
  }
}

/* =======================================================
   MOBILE MENU – BURGER TRUE CENTER (FLEX SAFE)
   ======================================================= */

@media (max-width:475px){
  nav{
    display:flex;
    align-items:center; /* vertical centering */
  }

  .nav-list{
    display:none;
  }

  .burger{
    display:flex;
    margin-left:20px;
  }
}



/* SECTION 5 */
.section-5{
  background:#BFB063;
  width:100%;
}

.section-5 .wave{
  display:block;
  width:100%;
  height:120px;
}


/* =========================
   SECTION 6 – RAMOS DE FLORES
   ========================= */
.section-6{
  height: 859px;
  background: #BFB063;
}

.grid-6{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 23px;
  padding: 0 20px 35px;
}

.grid-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: calc(calc(calc(calc(calc(76% + 10px) * 1.2) * 1.5) * 1.6) * 2);
  color: #403C04;
}

.title-condensed{
  font-family: 'Miller Banner Condensed', serif;
  font-size: 85px;
}

.title-script{
  font-family: 'Pinyon Script', cursive;
  font-size: 164px;
}

.grid-6 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}

.grid-6 img:hover{
  transform: rotate(7deg);
}

/* Image 13 spans the two bottom cells */
.img-bottom-span{
  grid-column: 2 / 4;
  grid-row: 2;
}

/* Section 6 image scale adjustment */
.section-6 .grid-6 img{
  transform: scale(0.85);
}

.section-6 .grid-6 img:hover{
  transform: scale(0.85) rotate(7deg);
}

/* Center images inside their grid cells */
.section-6 .grid-6{
  align-items: center;
  justify-items: center;
}

.section-6 .grid-6 img{
  object-fit: cover;
}

/* Section 6 overflow & sizing adjustments */
.section-6{
  height: auto;           /* allow content to define height */
  overflow: visible;      /* no clipping */
}

.section-6 .grid-6{
  overflow: visible;
}

.section-6 .grid-6 img{
  object-fit: contain;    /* avoid cropping */
}


/* =========================
   SECTION 6 – RESPONSIVE FINAL
   ========================= */

/* Tablet */
@media (max-width:1023px){
  .section-6{
    height:auto;
  }

  .section-6 .grid-6{
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,auto);
    padding:25px 0 35px;
    gap:20px;
    justify-items:center;
    align-items:center;
  }

  .section-6 .grid-title{
    text-align:center;
    align-items:center;
  }

  .section-6 .title-condensed{
    font-size:60px;
  }

  .section-6 .title-script{
    font-size:85px;
  }
}

/* Mobile */
@media (max-width:475px){
  .section-6{
    height:auto;
  }

  .section-6 .grid-6{
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,auto);
    padding:25px 0 35px;
    gap:20px;
    justify-items:center;
    align-items:center;
  }

  .section-6 .title-condensed{
    font-size:48px;
  }

  .section-6 .title-script{
    font-size:85px;
  }

  .section-6 .grid-6 img{
    transform:scale(0.5);
  }

  .section-6 .grid-6 img:hover{
    transform:scale(0.5) rotate(7deg);
  }
}


/* =========================
   SECTION 6 – TABLET & MOBILE
   ========================= */

/* Tablet */
@media (max-width:1023px){
  .section-6{
    height:auto;
  }

  .section-6 .grid-6{
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,auto);
    padding:25px 0 35px;
    gap:20px;
    justify-items:center;
    align-items:center;
  }

  .section-6 .grid-title{
    text-align:center;
    align-items:center;
  }

  .section-6 .title-condensed{
    font-size:60px;
  }

  .section-6 .title-script{
    font-size:85px;
  }
}

/* Mobile */
@media (max-width:475px){
  .section-6 .grid-6{
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,auto);
    padding:25px 0 35px;
    gap:20px;
    justify-items:center;
    align-items:center;
  }

  .section-6 .title-condensed{
    font-size:48px;
  }

  .section-6 .title-script{
    font-size:85px;
  }

  .section-6 .grid-6 img{
    transform:scale(0.5);
  }

  .section-6 .grid-6 img:hover{
    transform:scale(0.5) rotate(7deg);
  }
}


/* =========================
   SECTION 6 – FORCE GRID 1x5
   ========================= */

/* Tablet */
@media (max-width:1023px){
  .section-6 .grid-6{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(5, auto);
  }
}

/* Mobile */
@media (max-width:475px){
  .section-6 .grid-6{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(5, auto);
  }
}


/* =========================
   SECTION 6 – REAL 1x5 FIX
   ========================= */

/* Tablet & Mobile: reset all grid spans */
@media (max-width:1023px){
  .section-6 .grid-6 > *{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width:475px){
  .section-6 .grid-6 > *{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}


/* =========================
   SECTION 6 – LINE-HEIGHT REDUCED (TM)
   ========================= */

@media (max-width:1023px){
  .section-6 .grid-title{
    line-height: calc(1em / 3);
  }
}

@media (max-width:475px){
  .section-6 .grid-title{
    line-height: calc(1em / 3);
  }
}


/* =========================
   SECTION 6 – LINE-HEIGHT +100% (TM)
   ========================= */

@media (max-width:1023px){
  .section-6 .grid-title{
    line-height: 3.9em;
  }
}

@media (max-width:475px){
  .section-6 .grid-title{
    line-height: 3.9em;
  }
}

/* ===============================
   SECCIÓ 7
   =============================== */

.section-7 {
  height: 732px;
  background-color: #F7CDDA;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.section-7-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 125px;
  display: flex;
  align-items: flex-end;
}

.section-7-title {
  font-family: 'Miller Banner', serif;
  font-weight: 600;
  font-size: 365px;
  color: #8C0351;
  line-height: 1;
}

.section-7-images {
  position: absolute;
  bottom: 0;
  right: 125px;
}

.s7-img {
  position: absolute;
  max-height: 90%;
  width: auto;
  opacity: 0;
  transform: translateY(256px);
  transition: opacity 1029ms ease-out, transform 1029ms ease-out;
}

.s7-img.img-1 { right: 0; }
.s7-img.img-2 { right: -27px; }
.s7-img.img-3 { right: -54px; }

.s7-img.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   SECCIÓ 7 – FIX IMATGES SUPERPOSADES
   =============================== */

.section-7-images {
  position: absolute;
  bottom: 0;
  right: 125px;
  height: 100%;
  width: 500px;
  pointer-events: none;
}

.s7-img {
  position: absolute;
  bottom: 0;
  height: 80%;
  width: auto;
  z-index: 1;
  opacity: 1; /* forçar visibilitat */
  transform: none; /* desactivar animació temporalment */
}

.s7-img.img-1 { right: 0; z-index: 3; }
.s7-img.img-2 { right: -27px; z-index: 2; }
.s7-img.img-3 { right: -54px; z-index: 1; }

/* ===============================
   SECCIÓ 7 – SEPARACIÓ IMATGES + FONT REGULAR
   =============================== */

/* Canvi de pes tipogràfic */
.section-7-title {
  font-weight: 400; /* Regular */
}

/* Separació visual entre imatges */
.section-7-images {
  display: flex;
  align-items: flex-end;
  gap: 40px; /* separació entre imatges */
}

.s7-img {
  position: relative; /* permet gap */
  margin-left: 0;
}

/* ===============================
   SECCIÓ 7 – CENTRAR IMATGES
   =============================== */

.section-7-images {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

/* ===============================
   SECCIÓ 7 – POSICIÓ FINAL IMATGES
   =============================== */

.section-7-images {
  position: absolute;
  bottom: 0;
  left: 60%; /* més a la dreta */
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.s7-img {
  opacity: 0;
  transform: translateY(256px);
}

/* ===============================
   SECCIÓ 7 – CENTRAT CORRECTE
   =============================== */

/* El grup s'alinea respecte al contenidor, no al viewport */
.section-7-inner {
  position: relative;
}

.section-7-images {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ
   =============================== */

/* Desplaçament manual cap a la dreta fins a quedar visualment centrat */
.section-7-images {
  transform: translateX(180px);
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ (ESQUERRA)
   =============================== */

/* Desplaçament manual cap a l'esquerra fins a quedar visualment centrat */
.section-7-images {
  transform: translateX(-140px);
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ (ESQUERRA FORT)
   =============================== */

/* Desplaçament fort cap a l'esquerra */
.section-7-images {
  transform: translateX(-300px);
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ (ESQUERRA EXTREM)
   =============================== */

/* Desplaçament molt fort cap a l'esquerra */
.section-7-images {
  transform: translateX(-520px);
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ (ESQUERRA ULTRA)
   =============================== */

/* Desplaçament moltíssim cap a l'esquerra */
.section-7-images {
  transform: translateX(-720px);
}

/* ===============================
   SECCIÓ 7 – AJUST MANUAL POSICIÓ (ESQUERRA MODERAT)
   =============================== */

/* Desplaçament moderat cap a l'esquerra */
.section-7-images {
  transform: translateX(-580px);
}

/* ===============================
   SECCIÓ 7 – TEXT CENTRAT I SENSE MARGE INFERIOR
   =============================== */

.section-7-title {
  text-align: center;
  margin-bottom: 0;
}

/* ===============================
   SECCIÓ 7 – TEXT ENGANXAT A BAIX
   =============================== */

/* El títol queda enganxat a la part inferior de la secció */
.section-7-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.section-7-title {
  margin: 0;
  padding-bottom: 0;
}

/* ===============================
   SECCIÓ 7 – TEXT CENTRAT I ENGANXAT A BAIX (FIX)
   =============================== */

/* Prepare container */
.section-7-inner {
  position: relative;
}

/* Title pinned to bottom and centered */
.section-7-title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

/* ===============================
   SECCIÓ 7 – RESPONSIVE
   =============================== */

/* -------- TABLET -------- */
@media (max-width: 1023px) {

  .section-7-title {
    font-family: 'Miller Banner', serif;
    font-weight: 600; /* Semibold */
    font-size: 190px;
  }

  .s7-img {
    height: 65%;
  }
}

/* -------- MOBILE -------- */
@media (max-width: 475px) {

  .section-7-title {
    font-family: 'Miller Banner', serif;
    font-weight: 600; /* Semibold */
    font-size: 95px;
  }

  /* Mostrar només la primera imatge */
  .s7-img {
    display: none;
  }

  .s7-img.img-1 {
    display: block;
    height: 70%;
  }
}

/* ===============================
   SECCIÓ 7 – FIX RESPONSIVE FINAL
   =============================== */

/* -------- TABLET -------- */
@media (max-width: 1023px) {

  .section-7-title {
    font-weight: 400; /* Regular */
    font-size: 190px;
  }

  .section-7-images {
    left: 50%;
    transform: translateX(-50%);
  }

  .s7-img {
    height: 65%;
  }
}

/* -------- MOBILE -------- */
@media (max-width: 475px) {

  .section-7-title {
    font-weight: 400; /* Regular */
    font-size: 95px;
  }

  .section-7-images {
    left: 50%;
    transform: translateX(-50%);
  }

  .s7-img {
    display: none;
  }

  .s7-img.img-1 {
    display: block;
    height: 70%;
  }
}

/* ===============================
   SECCIÓ 8
   =============================== */

.section-8 {
  background: #8C0351;
  color: #ffffff;
  min-height: 100vh;
}

.section-8-inner {
  display: flex;
  align-items: flex-start;
  gap: 415px;
  padding: 20px 20px 20px 38px;
}

.section-8-title {
  font-family: 'Miller Banner Condensed', serif;
  font-weight: 600;
  font-size: 67px;
  line-height: 95%;
  margin: 0;
}

.section-8-info p {
  margin: 0 0 10px 0;
}

.info-medium {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
  font-size: 22px;
}

.info-extrabold {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  font-size: 22px;
}

/* -------- TABLET -------- */
@media (max-width: 1023px) {
  .section-8-inner {
    gap: 26px;
    padding: 15px 17px;
  }

  .section-8-title {
    font-size: 50px;
    line-height: 100%;
  }
}

/* -------- MOBILE -------- */
@media (max-width: 475px) {
  .section-8-inner {
    flex-direction: column;
    gap: 0;
  }

  /* Eliminar un text (títol) */
  .section-8-title {
    display: none;
  }
}

/* ===============================
   SECCIÓ 8 – ALÇADA, COLOR I JUSTIFICACIÓ
   =============================== */

.section-8 {
  height: 240px; /* alçada fixa a totes les versions */
  min-height: 240px;
  color: #F7CDDA; /* color tipografia */
}

.section-8-inner {
  justify-content: space-between; /* text justificat als costats */
  height: 100%;
}

/* Assegurem color en tots els textos */
.section-8-title,
.section-8-info p {
  color: #F7CDDA;
}