/* ================================================================
   ESTILOS ESPECÍFICOS – página de proyecto Patricia Nicolás
   ================================================================ */

/* ── HERO TITLE ── */
.pn-hero { padding: 40px 48px 0; }
.pn-title {
  font-family: var(--font-inter);
  font-weight: 800;
  font-size: clamp(52px, 7vw, 88px);
  color: var(--blue);
  letter-spacing: -.02em;
  line-height: 1;
}

/* ── INTRO: descripción + collage ── */
.pn-intro.pn-section-cols { padding-top: 40px; }
.pn-desc {
  font-size: var(--text-md);
  color: var(--blue);
  line-height: 1.7;
}
.pn-desc strong { color: var(--blue); }

.pn-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--dark);
}
.pn-globe img { width: 20px; height: 20px; }

/* ── SECCIÓN DE DOS COLUMNAS STICKY ── */
.pn-section-cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
  padding: 0 48px;
}
.pn-col-sticky { position: sticky; top: 40px; align-self: start; }
.pn-col { display: flex; flex-direction: column; gap: 32px; }

/* ── CAPTION ── */
.pn-caption {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-didot);
  font-style: italic;
  font-size: 20px;
  color: var(--blue);
}

/* ── SECCIÓN CON TÍTULO A LA IZQUIERDA ── */
.pn-side {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 48px 0;
}
.pn-side > .pn-caption {
  position: sticky;
  top: 40px;
  flex: 1;
  margin-top: 0;
}
.pn-side > :not(.pn-caption) {
  flex: 0 0 70%;
  width: 70%;
  margin-left: 0;
}

/* ── BLOQUES ── */
.pn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  width: 70%;
  margin-left: auto;
}
.pn-grid img { width: 100%; border-radius: 16px; display: block; }
.pn-grid img:last-child:nth-child(odd) { grid-column: 2; }
.pn-block { padding: 40px 48px 0; }
.pn-img img { width: 100%; border-radius: 16px; display: block; }

/* ── COLLAGE "THE SPECTRUM OF SUMMER" ── */
.pn-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  align-items: stretch;
}
.pn-hero-main { border-radius: 16px; overflow: hidden; }
.pn-hero-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-hero-side { display: flex; flex-direction: column; gap: 16px; }
.pn-hero-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
}
.pn-hero-side-row img,
.pn-hero-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ── TARJETAS DE TEXTO (gráfica de campaña) ── */
.pn-card {
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.pn-card span {
  font-family: var(--font-inter);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.pn-card em { font-style: italic; font-weight: 500; text-transform: none; }

.pn-card--dark,
.pn-card--dark2,
.pn-card--dark3 {
  background: #111;
}
.pn-card--dark span,
.pn-card--dark2 span,
.pn-card--dark3 span { color: #fff; }
.pn-card--dark span { font-size: 22px; }
.pn-card--dark2 span { font-size: 26px; }
.pn-card--dark3 span { font-size: 26px; }

.pn-card--cream {
  background: #F3EEDD;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.pn-card--cream span { color: #111; font-size: 26px; }

.pn-card--purple { background: #C9AEE8; padding: 0; }
.pn-card--purple img { width: 100%; height: 100%; object-fit: cover; }

.pn-card--green { background: #C3E6B4; }
.pn-card--green img { width: 60%; }

/* ── NEW COLLECTION GUMMY BEARS ── */
.pn-gummy-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 16px;
}
.pn-gummy-col { display: flex; flex-direction: column; gap: 16px; }
.pn-gummy-col img { width: 100%; border-radius: 16px; display: block; flex: 1; object-fit: cover; }
.pn-gummy-col .pn-card { flex: 1; }
.pn-gummy-col-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn-gummy-col-row img { width: 100%; border-radius: 16px; display: block; }
.pn-gummy-tall img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }

/* ── NEW PRODUCTS ON THE WEBSITE ── */
.pn-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.pn-products > img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.pn-products-side { display: flex; flex-direction: column; gap: 16px; }
.pn-products-side img { width: 100%; border-radius: 16px; display: block; }
.pn-products-side .pn-card { flex: 1; }

/* ── E-MAIL: MOODBOARD ── */
.pn-email-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  grid-template-rows: repeat(3, minmax(160px, auto));
  gap: 16px;
  grid-template-areas:
    "a b c"
    "d e c"
    "f g h";
}
.pn-email-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.pn-email-a { grid-area: a; }
.pn-email-b { grid-area: b; }
.pn-email-c { grid-area: c; }
.pn-email-d { grid-area: d; }
.pn-email-e { grid-area: e; }
.pn-email-f { grid-area: f; }
.pn-email-g { grid-area: g; }
.pn-email-h { grid-area: h; }
.pn-email-grid .pn-card { height: 100%; }

/* ── FILAS DE IMÁGENES ── */
.pn-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pn-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pn-row-3 img,
.pn-row-2 img { width: 100%; border-radius: 16px; display: block; }

/* ================================================================
   RESPONSIVE – TABLET (≤1024px)
   ================================================================ */
@media (max-width: 1024px) {
  .pn-hero { padding: 32px 32px 0; }
  .pn-section-cols { padding: 0 32px; gap: 32px; }
  .pn-block, .pn-side { padding: 32px 32px 0; }

  .pn-gummy-grid { grid-template-columns: 1fr 1fr; }
  .pn-gummy-tall { grid-column: span 2; }

  .pn-email-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "c c"
      "d e"
      "f g"
      "h h";
  }
}

/* ================================================================
   RESPONSIVE – MÓVIL (≤640px)
   ================================================================ */
@media (max-width: 640px) {
  .pn-hero { padding: 24px 20px 0; }

  .pn-section-cols {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }

  .pn-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }


  .pn-col-sticky { position: static; }
  .pn-col { gap: 24px; }

  .pn-block { padding: 24px 20px 0; }
  .pn-caption { font-size: 17px; }
  .pn-side > .pn-caption { position: static; }
  .pn-side { flex-direction: column; gap: 12px; padding: 24px 20px 0; }
  .pn-side > :not(.pn-caption) { flex: none; width: 100%; }

  .pn-hero-grid { grid-template-columns: 1fr; }
  .pn-hero-main { aspect-ratio: 4 / 3; }
  .pn-hero-side-row { grid-template-columns: 1fr 1fr; }

  .pn-gummy-grid { grid-template-columns: 1fr; }
  .pn-gummy-tall { grid-column: auto; aspect-ratio: 4 / 3; }

  .pn-products { grid-template-columns: 1fr; }

  .pn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }
  .pn-grid img:last-child:nth-child(odd) { grid-column: auto; }

  .pn-email-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f"
      "g"
      "h";
  }

  .pn-row-3,
  .pn-row-2 { grid-template-columns: 1fr; }
}