:root {
    --white: #ffffff;
    --black: #000000;
    --font-main: 'Darumadrop One', cursive;
    --content-width: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); background: var(--white); color: var(--black); overflow-x: hidden; }

/* ESTILS TIPOGRÀFICS */
.p1-style { font-size: 24px; line-height: 1.2; }
.h4-style { font-size: 64px; line-height: 1; }
.text-white { color: var(--white) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.container { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; width: 100%; }
.container-full { max-width: var(--content-width); margin: 0 auto; padding: 0 5px; width: 100%; }

section { min-height: 100vh; display: flex; align-items: center; width: 100%; position: relative; }
.section-white { background-color: var(--white); }
.section-black { background-color: var(--black); color: var(--white); }

/* HEADER */
.main-header { padding: 20px 0; border-bottom: 2px solid var(--black); position: sticky; top: 0; background: var(--white); z-index: 100; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.nav-desktop a { margin: 0 15px; text-decoration: none; color: var(--black); font-size: 24px; }
.nav-mobile { display: none; font-size: 10px; }
.header-icons img { width: 30px; margin-left: 15px; }

/* SECCIÓ 1: HOME (1260x725) */
.section-home-size { min-height: 725px; max-width: 1260px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.h1-title { font-size: 280px; text-align: center; letter-spacing: -4px; width: 100%; white-space: nowrap; }
.h1-home-adjust { margin-top: -20px; margin-bottom: 10px; }
.carousel-container { overflow: hidden; width: 100%; padding: 20px 0; }
.carousel-track { display: flex; gap: 60px; width: max-content; animation: scroll-left 40s linear infinite; align-items: center; }
.carousel-track img { transition: transform 2s ease-in-out; object-fit: contain; flex-shrink: 0; display: block; }

/* Mides carrossel */
.img-cafetera { width: 226.73px; height: 159.14px; }
.img-sofa { width: 315px; height: 247px; }
.img-tamboret { width: 151.15px; height: 204.73px; }
.img-llum { width: 141.57px; height: 266.12px; }
.img-pancakes { width: 149px; height: 189px; }
.img-cadira { width: 175px; height: 222px; }
.img-cadira-blava { width: 206px; height: 196px; }
.img-llum-lila { width: 152px; height: 252px; }
.img-mesita-vermella { width: 152.22px; height: 252.93px; }
.img-cadira-rosa { width: 206px; height: 196px; }
.img-cadira-plata { width: 175px; height: 222px; }
.img-llum-rosa { width: 161px; height: 124px; }

/* SECCIÓ 2: WHAT'S NEW (FONS NEGRE) */
.section-black { background-color: var(--black); }
.section-padding-v { padding: 80px 0; }
.whats-new-flex { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.h2-outline { font-size: 280px; text-align: center; letter-spacing: -4px; line-height: 150px; color: var(--black); -webkit-text-stroke: 4px var(--white); }
.featured-img-wrapper { max-width: 600px; display: flex; flex-direction: column; }
.featured-img { width: 100%; height: auto; margin-bottom: 20px; }

/* SECCIÓ 3: INTRO (1260x437) */
.section-intro-size { min-height: 437px; max-width: 1260px; margin: 0 auto; padding: 60px 150px; display: flex; align-items: center; }
.container-intro { width: 100%; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.btn-catalog-s3 { align-self: flex-end; margin-right: 0 !important; margin-top: 10px; margin-left: auto !important; }
.intro-right .p1-style { margin-bottom: 1.5em; text-align: left; }

/* SECCIÓ 4: FOTO + STRIPE */
.section-black-foto { display: flex; flex-direction: column; min-height: auto; align-items: center; }
.full-width-img { width: 100%; height: auto; display: block; }
.black-stripe { background-color: var(--black); width: 1260px; height: 122px; display: flex; align-items: center; justify-content: flex-end; padding: 0 40px; }
.container-stripe { width: 100%; }

/* SECCIÓ 5: SPOTLIGHT (1260x694) */
.section-spotlight-size { min-height: 694px; max-width: 1260px; margin: 0 auto; }
.spotlight-padding-bottom { padding-bottom: 80px; }
.spotlight-subtitle { text-align: left; margin-top: 10px; margin-bottom: 30px; }

.spotlight-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 40px; }
.arrow-nav { position: absolute; font-size: 60px; cursor: pointer; font-weight: bold; top: 50%; transform: translateY(-50%); z-index: 20; user-select: none; }
.left-arrow { left: -20px; }
.right-arrow { right: -20px; }

.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; }

.product-card { 
    width: 275px; height: 364px; border: 6px solid var(--black); 
    border-radius: 24px; background: var(--white); color: var(--black); 
    display: flex; flex-direction: column; position: relative; 
}
.product-card::before { content: ""; position: absolute; inset: -6px; border: 6px solid var(--black); border-radius: 24px; filter: url(#rough-edges); pointer-events: none; z-index: 10; }

.card-img-upper { width: 100%; height: 280px; border-bottom: 6px solid var(--black); position: relative; background: var(--white); display: flex; justify-content: center; align-items: center; }
.product-img { width: 226.36px; height: 249px; object-fit: contain; position: relative; z-index: 2; }
.badge-hot { position: absolute; top: 15px; left: 15px; z-index: 5; width: 77px; height: 29px; border: 3px solid var(--black); border-radius: 25px; font-size: 14px; background: white; display: flex; justify-content: center; align-items: center; filter: url(#soft-rough); }
.fav-right { position: absolute; top: 15px; right: 15px; z-index: 11; } 

.card-info-lower { width: 100%; height: 77px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; background: var(--white); }
.card-text-stack { display: flex; flex-direction: column; justify-content: center; }
.card-h1 { font-size: 18px; line-height: 1; }
.card-h2 { font-size: 12px; opacity: 0.8; line-height: 1; margin-top: 4px; }

.btn-fav, .btn-cart { background: var(--white); border: 3px solid var(--black); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.icon-swap { width: 19px; height: 16px; object-fit: contain; }
.btn-fav:hover, .btn-cart:hover { background: var(--black); }
.btn-fav:hover .icon-swap, .btn-cart:hover .icon-swap { filter: invert(1); }

/* BOTONS GENERICS */
.btn-buy, .btn-catalog, .btn-catalog-outline { display: block; font-family: var(--font-main); font-size: 36px; line-height: 0.7; border-radius: 40px; filter: url(#rough-edges); cursor: pointer; transition: 0.3s; }
.btn-buy, .btn-catalog { margin: 30px auto; padding: 15px 50px; border: 5px solid var(--black); background: var(--white); }
.btn-buy:hover, .btn-catalog:hover { background: var(--black); color: var(--white); }
.btn-catalog-outline { align-self: flex-start; padding: 10px 40px; border: 4px solid var(--white); background: transparent; color: var(--white); }
.btn-catalog-outline:hover { background: var(--white); color: var(--black); }

/* SECCIÓ 6: FOOTER */
.main-footer { background: var(--black); color: var(--white); padding: 80px 0 30px; }
.footer-top { display: flex; justify-content: space-between; margin-bottom: 50px; flex-wrap: wrap; }
.footer-h1 { font-size: 70px; line-height: 0.7; letter-spacing: -2px; }
.footer-middle { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 50px; align-items: flex-start; }
.footer-h2 { font-size: 16px; line-height: 0.7; }
.text-right-desktop { text-align: right; }
.rough-line { height: 4px; background: var(--white); filter: url(#rough-edges); margin: 20px 0; }

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* RESPONSIVE TABLET */
@media (max-width: 1023px) {
    .section-spotlight-size { min-height: 1006px; max-width: 620px; padding: 0 20px; }
    .p1-style { font-size: 16px; }
    .h4-style { font-size: 32px; }
    .btn-buy, .btn-catalog, .btn-catalog-outline { font-size: 16px; width: 71px; height: 29px; padding: 0; display: flex; align-items: center; justify-content: center; }
    .section-home-size { min-height: 539px; max-width: 620px; }
    .section-intro-size { padding: 40px 20px; min-height: auto; max-width: 620px; }
    .black-stripe { width: 620px; height: 60px; padding: 0 20px; }
    .h1-title { font-size: 140px; }
    .h2-outline { font-size: 150px; line-height: 100px; -webkit-text-stroke: 3px var(--white); }
    .cards-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; }
    .nav-desktop { display: none; } .nav-mobile { display: block; }
    .arrow-nav { display: none; }
    .footer-h1 { font-size: 30px; }
    .footer-h2 { font-size: 13px; }
}

/* RESPONSIVE MOBILE */
@media (max-width: 475px) {
    .section-spotlight-size { min-height: 1610px; max-width: 300px; margin: 0 auto; padding: 0 10px; }
    .spotlight-wrapper { padding: 0; }
    .cards-grid { display: flex; flex-direction: column; align-items: center; gap: 60px; margin-top: 40px; }
    .p1-style { font-size: 10px; }
    .h4-style { font-size: 20px; }
    .btn-buy, .btn-catalog, .btn-catalog-outline { font-size: 10px; width: 43px; height: 17px; }
    .section-home-size { min-height: 418px; max-width: 300px; }
    .black-stripe { width: 202px; height: 52px; padding: 0 10px; }
    .mobile-br { display: block; }
    .h1-title { font-size: 69px; }
    .h2-outline { font-size: 70px; line-height: 40px; -webkit-text-stroke: 2px var(--white); }
    .intro-grid { grid-template-columns: 1fr; text-align: center; }
    .text-right { text-align: center; }
    .btn-catalog-s3 { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
    .footer-top { flex-direction: column; gap: 15px; }
    .footer-middle { grid-template-columns: 1fr; gap: 20px; text-align: center; }
    .footer-h1 { font-size: 30px; }
    .footer-h2 { font-size: 11px; }
}