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

body {
  font-family: 'Clash Display', sans-serif;
  background-color: #FCF8F1;
}

/* ================= PRESENTACIÓ (NO TOCAR) ================= */
.presentacio {
  min-height: 100vh;
  background-image: url('../images/background.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 65px;
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #FCF8F1;
}

.menu-btn,
.cart-btn {
  background: none;
  border: none;
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
  font-size: 25pt;
  color: #FCF8F1;
  cursor: pointer;
  transition: color .15s ease, transform .1s ease;
}

.logo {
  font-family: 'Swear Display', serif;
  font-weight: 300;
  font-size: 35pt;
  color: #FCF8F1;
  transition: color .15s ease, transform .1s ease;
}

.menu-btn:hover,
.cart-btn:hover,
.logo:hover { color: #DE3400; }

.menu-btn:active,
.cart-btn:active,
.logo:active { transform: scale(.94); }

.sticker-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sticker {
  width: 300px;
  animation: bounceRotate .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes bounceRotate {
  0% { transform: rotate(0); }
  30% { transform: rotate(12deg); }
  60% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}

/* ================= 25 DESEMBRE ================= */

.desembre {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.desembre-inner {
  max-width: 1280px;
  padding: 60px 30px; /* ~60px arriba y abajo + margen web */
}

.desembre-text {
  font-family: 'Swear Display', serif;
  font-weight: 300;
  line-height: 95%;
  font-size: 100pt;
  text-align: left;
}

/* Floating images */
.float-img {
  position: absolute;
  opacity: 0;
  transition: opacity 2.5s ease, transform 2.5s ease;
  cursor: pointer;
}

.float-img.right { transform: translateX(120px); }
.float-img.left { transform: translateX(-120px); }

.float-img.visible {
  opacity: 1;
  transform: translateX(0);
}

.float-img:hover { opacity: 0; }

.img-3 { top: 120px; right: 30px; width: 180px; }
.img-4 { top: 380px; left: 30px; width: 200px; }
.img-5 { top: 700px; right: 70px; width: 220px; }

/* RESPONSIVE */
@media (max-width: 1023px) {
  .desembre-text { font-size: 70pt; }
}

@media (max-width: 639px) {
  .desembre-text { font-size: 40pt; }
  .sticker { width: 220px; }
}


/* ================= NOVEDADES ================= */

.novedades {
  min-height: 100vh;
  width: 100%;
}

.novedades-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 30px;
}

.novedades-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: center;
}

.card:nth-child(1) { grid-column: 2; }
.card:nth-child(2) { grid-column: 3; }
.card:nth-child(3) { grid-column: 4; }

.card {
  text-align: center;
}

.card-img {
  width: 235px;
  height: 302px;
  margin: 0 auto;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s ease;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}

.card-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16pt;
  opacity: 0;
}

.card-img:hover img {
  opacity: .3;
  transform: scale(1.15);
}

.card-img:hover .card-title {
  opacity: 1;
}

.card-img:hover {
  box-shadow: 0 0 15px rgba(222,52,0,0.25);
}

.card-index {
  margin-top: 12px;
  font-size: 20pt;
  font-weight: 500;
  color: #DE3400;
}

@media (max-width: 1023px) {
  .novedades-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
  }

  .card {
    flex: 0 0 auto;
  }
}


/* ===== NOVEDADES (LAYOUT AJUSTADO) ===== */

.novedades {
  min-height: 100vh;
  padding: 100px 0; /* mismo espacio arriba y abajo */
}

.novedades-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.novedades-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  align-items: center;
}

/* cards ocupan las 3 columnas centrales */
.novedades-grid .card:nth-child(1) { grid-column: 2; }
.novedades-grid .card:nth-child(2) { grid-column: 3; }
.novedades-grid .card:nth-child(3) { grid-column: 4; }

@media (max-width: 1023px) {
  .novedades {
    padding: 100px 0;
  }

  .novedades-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
  }

  .card {
    flex: 0 0 auto;
  }
}


/* ===== NOVEDADES FIX FINAL ===== */

/* igualar espacio arriba y abajo */
.novedades {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* grid manda, no tamaños fijos */
.novedades-grid {
  align-items: start;
}

/* la card ocupa TODO el ancho de su columna */
.card {
  width: 100%;
}

/* contenedor visual de la imagen */
.card-img {
  width: 100%;
  aspect-ratio: 235 / 302; /* mantiene proporción original */
  height: auto;
}

/* la imagen se adapta al contenedor */
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* quitar cualquier margen vertical fantasma */
.card,
.card-index {
  margin-bottom: 0;
}


/* ================= TALLER ================= */

.taller {
  min-height: 100vh;
  width: 100%;
  padding: 100px 0;
}

.taller-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.taller-left h1 {
  text-align: left;
}

.taller-right {
  max-width: 420px;
}

@media (max-width: 1023px) {
  .taller-inner {
    flex-direction: column;
    gap: 20px;
  }
}


/* ===== TALLER TYPOGRAPHY FIX ===== */

/* H1 Taller */
.taller h1 {
  font-family: 'Swear Display', serif;
  font-weight: 300;
  line-height: 95%;
}

/* Right texts */
.taller h4 {
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
}

.taller .texto-base {
  font-family: 'Clash Display', sans-serif;
  font-weight: 400;
}

.taller .text-mini {
  font-family: 'Clash Display', sans-serif;
  font-weight: 400;
}

/* Desktop */
@media (min-width: 1024px) {
  .taller h1 { font-size: 150pt; }
  .taller h4,
  .taller .texto-base { font-size: 20pt; line-height: 22pt; }
  .taller .text-mini { font-size: 16pt; }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .taller h1 { font-size: 130pt; }
  .taller h4,
  .taller .texto-base { font-size: 18pt; line-height: 20pt; }
  .taller .text-mini { font-size: 14pt; }
}

/* Mobile */
@media (max-width: 639px) {
  .taller h1 { font-size: 85pt; }
  .taller h4,
  .taller .texto-base { font-size: 16pt; line-height: 18pt; }
  .taller .text-mini { font-size: 11pt; }
}


/* ===== TALLER LAYOUT & INTERACCION FIX ===== */

.taller-inner {
  padding-left: 30px;
  padding-right: 30px;
}

.taller-right h4,
.taller-right .texto-base,
.taller-right .text-mini {
  display: block;
}

.taller-right h4 { margin-bottom: 10px; }
.taller-right .texto-base { margin-bottom: 10px; }

.taller-right .text-mini {
  cursor: pointer;
  transition: color 0.2s ease;
}

.taller-right .text-mini:hover {
  color: #DE3400;
}


/* ===== TALLER ALIGN & SPACING FINAL FIX ===== */

.taller-inner {
  padding-left: 30px;
  padding-right: 30px;
  align-items: center;
}

.taller-left,
.taller-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.taller-right h4 { margin-bottom: 20px; }
.taller-right .texto-base { margin-bottom: 20px; }


/* ===== TALLER ALIGN LEFT / RIGHT FIX ===== */

.taller-inner {
  justify-content: space-between;
}

.taller-left {
  align-items: flex-start;
}

.taller-right {
  align-items: flex-end;
  text-align: left;
}


/* ===== TALLER VIEWPORT MARGINS FIX ===== */

.taller {
  width: 100%;
}

.taller-inner {
  max-width: none; /* ignore 1280px for this section */
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

.taller-left {
  align-items: flex-start;
}

.taller-right {
  margin-left: auto; /* push to right edge */
  align-items: flex-end;
  text-align: left;
}


/* ===== TALLER RIGHT BLOCK TEXT ALIGN FIX ===== */

.taller-right h4,
.taller-right .texto-base,
.taller-right .text-mini {
  text-align: right;
}


/* ===== TALLER BASE & MINI ALIGN LEFT (H4 UNCHANGED) ===== */

.taller-right .texto-base,
.taller-right .text-mini {
  text-align: left;
  align-self: flex-start;
}


/* ===== TALLER BASE & MINI OFFSET 50PX ===== */

.taller-right .texto-base,
.taller-right .text-mini {
  margin-left: 50px;
}


/* ===== TALLER ALIGN H4 WITH BASE & MINI ===== */

.taller-right h4 {
  margin-left: 50px;
}


/* ===== TALLER H4 LEFT ALIGN REFERENCE FIX ===== */

.taller-right h4 {
  text-align: left;
  align-self: flex-start;
}


/* ===== ESPACIO ENTRE NOVEDADES Y TALLER ===== */

.taller {
  margin-top: -250px;
}


/* =========================
   ESTRELLAS
========================= */

.estrellas {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.estrellas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.estrella-diagonal {
  position: absolute;
  z-index: 2;
}

.estrella-a {
  top: 15%;
  left: 20%;
}

.estrella-b {
  bottom: 15%;
  right: 20%;
}

.estrella-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 260px;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.estrella-img {
  width: 100%;
  transition: transform 0.3s ease;
}

.fum-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fum-stack span {
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: 25pt;
  color: #DE3400;
  transform: rotate(34deg);
}

.estrella-hover-text {
  position: absolute;
  opacity: 0;
  font-family: 'Clash Display', sans-serif;
  font-size: 20pt;
  color: #DE3400;
  transition: opacity 0.2s ease;
}

.estrella-card:hover .estrella-img {
  transform: scale(1.15);
}

.estrella-card:hover .estrella-hover-text {
  opacity: 1;
}


/* ===== ESTRELLAS AJUSTES ===== */

/* Escala imágenes diagonales */
.estrella-diagonal {
  transform: scale(0.7);
}

/* Diagonal correcta: abajo izquierda → arriba derecha */
.estrella-a {
  bottom: 10%;
  left: 10%;
  top: auto;
}

.estrella-b {
  top: 10%;
  right: 10%;
  bottom: auto;
}

/* Escala base estrella central */
.estrella-img {
  transform: scale(2.2);
}

/* Hover mantiene incremento relativo */
.estrella-card:hover .estrella-img {
  transform: scale(2.53);
}

.image-12-card {
  position: relative;
}

.image-12-card .fum-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

/* Card estrella - estados hover */
.image-12-card {
  position: relative;
}

.image-12-card .fum-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transition: opacity 0.4s ease;
  opacity: 1;
}

.image-12-card .fum-descripcion {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  color: #DE3400;
}

/* Hover */
.image-12-card:hover .fum-container {
  opacity: 0;
}

.image-12-card:hover .fum-descripcion {
  opacity: 1;
}

/* FIX animación estrella */
.image-12-card {
  overflow: hidden;
}

.image-12-card .fum-container,
.image-12-card .fum-descripcion {
  transition: opacity 0.35s ease;
}

.image-12-card .fum-descripcion {
  pointer-events: none;
}

/* =========================
   FOOTER
   ========================= */

.footer {
  background-color: #FCF8F1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.footer__inner {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.footer__title {
  font-family: "Swear Display";
}

.footer__list,
.footer__contact {
  font-family: "Clash Display";
}

.footer__list {
  list-style: none;
  padding: 0;
}

.footer__link {
  transition: color 0.3s ease;
}

.footer__link:hover {
  color: #DE3400;
}

/* Tablet & Mobile */
@media (max-width: 1023px) {
  .footer__inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer__title {
    text-align: center;
  }

  .footer__list {
    align-self: flex-start;
  }

  .footer__contact {
    align-self: flex-end;
    text-align: right;
  }
}

/* =========================
   FOOTER FIX
   ========================= */

.footer {
  min-height: auto;
  padding: 120px 0;
}

.footer__inner {
  max-width: 420px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  column-gap: 40px;
  align-items: start;
}

.footer__title {
  font-family: "Swear Display";
  font-weight: 300;
  line-height: 95%;
  font-size: 150pt;
}

.footer__list,
.footer__contact {
  font-family: "Clash Display";
  font-size: 20pt;
  line-height: 22pt;
}

/* Tablet */
@media (max-width: 1023px) {
  .footer__inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .footer__title {
    font-size: 130pt;
    text-align: center;
  }

  .footer__list {
    text-align: left;
  }

  .footer__contact {
    text-align: right;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .footer__title {
    font-size: 85pt;
  }

  .footer__list,
  .footer__contact {
    font-size: 16pt;
    line-height: 18pt;
  }
}

/* =========================
   FOOTER LAYOUT FIX
   ========================= */

.footer {
  width: 100%;
  padding: 120px 30px;
}

.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .footer {
    padding: 80px 30px;
  }
}

/* =========================
   FOOTER EDGE ALIGNMENT
   ========================= */

.footer__inner {
  position: relative;
}

.footer__title {
  margin-left: 30px;
}

.footer__contact {
  margin-right: 30px;
  justify-self: end;
}

/* =========================
   FOOTER ALIGNMENT FIX
   ========================= */

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}

.footer__title {
  text-align: left;
  margin-left: 30px;
}

.footer__list {
  text-align: left;
}

.footer__contact {
  text-align: right;
  margin-right: 30px;
}

/* =========================
   FOOTER FINAL FIX (OBEYING FIGMA)
   ========================= */

.footer {
  width: 100%;
  padding: 120px 30px;
}

.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* Left block — h1 glued to viewport left (30px) */
.footer__title {
  margin-left: -30px;
  text-align: left;
}

/* Center block */
.footer__list {
  text-align: center;
}

/* Right block — aligned with "taller" content column */
.footer__contact {
  justify-self: end;
  text-align: right;
}

/* Tablet & Mobile */
@media (max-width: 1023px) {
  .footer__inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .footer__title {
    margin-left: 0;
    text-align: center;
  }

  .footer__list {
    text-align: left;
  }

  .footer__contact {
    text-align: right;
  }
}

/* =========================
   REMOVE GAP BETWEEN TALLER & ESTRELLAS
   ========================= */

section#taller {
  margin-bottom: 0;
  padding-bottom: 0;
}

section#estrellas {
  margin-top: 0;
  padding-top: 0;
}

/* =========================
   FOOTER H1 MAX LEFT
   ========================= */

.footer {
  padding-left: 30px;
  padding-right: 30px;
}

.footer__inner {
  margin-left: 0;
}

.footer__title {
  margin-left: 0;
}

/* =========================
   FOOTER RIGHT TEXT MAX RIGHT
   ========================= */

.footer__contact {
  margin-right: 0;
  justify-self: end;
  text-align: left;
}

/* =========================
   FOOTER CENTER BLOCK FIX
   ========================= */

.footer__list {
  text-align: left;
  width: fit-content;
  justify-self: end;
}

/* =========================
   FOOTER CENTER WIDTH 300PX
   ========================= */

.footer__list {
  width: 300px;
}

/* =========================
   FOOTER GAPS 100PX
   ========================= */

.footer__inner {
  column-gap: 100px;
}

/* =========================
   FOOTER PARAGRAPH SPACING
   ========================= */

.footer p {
  margin-bottom: 10px;
}

.footer p:last-child {
  margin-bottom: 0;
}

/* =========================
   FOOTER CENTRAL LIST SPACING
   ========================= */

.footer__list li {
  margin-bottom: 10px;
}

.footer__list li:last-child {
  margin-bottom: 0;
}