/* ==========================================================
   GIAPPONE LANDING
   Mobile first · estilos encapsulados bajo .jp-page
   ========================================================== */

body {
  margin: 0;
}

.jp-page {
  --jp-bg: #063a69;
  --jp-bg-dark: #032d52;
  --jp-bg-deep: #01233f;
  --jp-bg-panel: #011d3d;
  --jp-blue-200: #052e5a; /* usado en texto de botón sólido y en el triángulo de play */
  --jp-blue-100: #06396f; /* fill sólido de tarjetas Fecha/Donde/Biglietti (Evento) */
  --jp-text: #f7f1e7;
  --jp-text-muted: #d4e0ea;
  --jp-gold: #d8b06e;
  --jp-pink: #ffbed8;      /* pink300 - links, eyebrow secundario */
  --jp-pink-200: #ffeaf3;  /* pink200 - texto sobre fondos oscuros */
  --jp-pink-400: #ffaece;  /* pink400 - subtitulos header3 debajo de H1/H2 */
  --jp-line: rgba(255, 255, 255, 0.18);
  --jp-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  --jp-font-display: "Zen Antique", serif;
  --jp-font-sans: "Instrument Sans", Arial, sans-serif;
  --jp-font-copy: "Lexend", Arial, sans-serif;

  /* Escala tipográfica tomada de Figma */
  --jp-fs-h1: clamp(3rem, 8vw, 5rem);      /* 48px mobile → 80px desktop */
  --jp-lh-h1: 1.10;                         /* 88/80 */
  --jp-fs-h2: clamp(2.5rem, 5.5vw, 3.5rem); /* 40px mobile → 56px desktop */
  --jp-lh-h2: 1.143;                        /* 64/56 */
  --jp-fs-h3: clamp(1.75rem, 4vw, 2.5rem);  /* 28px mobile → 40px desktop */
  --jp-lh-h3: 1.2;                          /* 48/40 */
  --jp-fs-header3: clamp(1.125rem, 3vw, 1.625rem); /* 18px mobile → 26px desktop */
  --jp-lh-header3: 1.31;                    /* 34/26 */
  --jp-fs-subtitle: 1.125rem;               /* 18px */
  --jp-lh-subtitle: 1.333;                  /* 24/18 */
  --jp-fs-body: 1rem;                       /* 16px */
  --jp-lh-body: 1.5;                        /* 24/16 */
  --jp-fs-caption: 0.875rem;                /* 14px */
  --jp-lh-caption: 1.429;                   /* 20/14 */
  --jp-fs-button: 0.875rem;                 /* 14px */
  --jp-lh-button: 1.286;                    /* 18/14 */
  --jp-gold-gradient: linear-gradient(
    90deg,
    #D89958 13.14%,
    #8C5A30 38.47%,
    #A27544 43.68%,
    #DCBF7C 57.09%,
    #F4DC92 63.8%,
    #E6C880 69.76%,
    #C39752 82.42%,
    #B3803D 87.64%
  );

  /* Proporción imagen/contenido en Artisti (medida en Figma desktop 1400px: 616px/672px). */
  --jp-split-media: 672fr;
  --jp-split-content: 616fr;

  /* Gap entre imagen y acordeón en .jp-feature, y margen del lado sin imagen.
     Medido en el PDF (1400px): 64px fijos en 3 secciones distintas (normal y --reverse).
     Valor fijo, no fluido: no hay evidencia en el PDF de una curva entre breakpoints. */
  --jp-feature-gap: 4rem;

  width: 100%;
  overflow: clip;
  background: linear-gradient(180deg, #01192f 0%, #032040 22%, #053466 50%, #06396f 78%, #053972 100%);
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-page,
.jp-page *,
.jp-page *::before,
.jp-page *::after {
  box-sizing: border-box;
}

.jp-page :where(h1, h2, h3, h4, p, ul) {
  margin: 0;
}

.jp-page :where(img, svg) {
  display: block;
  max-width: 100%;
}

.jp-page :where(a) {
  color: inherit;
}

.jp-page button,
.jp-page input {
  font: inherit;
}

.jp-container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.jp-eyebrow {
  margin-bottom: 0.65rem;
  color: var(--jp-gold);
  font-size: var(--jp-fs-caption);
  line-height: var(--jp-lh-caption);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* Botones */
/* CTA Programma Generale */
.jp-programme-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding-block: 5.5rem; /* 88px exactos, top/bottom mobile (dato de Figma) */
  text-align: center;
  background-color: #032040;
  background-image: url("../img/sections/programa-generale-mobile.webp");
  background-repeat: no-repeat;
  background-position: center bottom; /* alineada al borde inferior de la sección */
  background-size: cover;
}

@media (min-width: 48rem) {
  .jp-programme-cta {
    background-image: url("../img/backgrounds/sakura-decor.webp");
  }
}

.jp-programme-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -2rem;
  bottom: -2rem;
  width: 16rem;
  height: 16rem;
 
}

.jp-programme-cta__inner {
  max-width: 57rem; /* 904px medidos en Figma (etiqueta "904 x 128 Hug") */
  margin-inline: auto;
}

.jp-programme-cta h2 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h2);
  line-height: var(--jp-lh-h2);
  font-weight: 400;
  padding-bottom: 0.3em; /* aire extra debajo del título: se ven bien las descendentes (g, p, j, q, y) y no se colapsa como pasaría con margin */
  overflow: visible;
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-programme-cta p {
  margin-top: 1.5rem;
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-programme-cta .jp-button {
  margin-top: 3rem; /* ~50px medidos en captura de Figma */
}

.jp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding: 0.9375rem 1.5rem; /* 15px / 24px */
  border: 0;
  border-radius: 0.5rem; /* 8px */
  background: var(--jp-pink);
  color: var(--jp-blue-200);
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-button);
  font-weight: 600;
  line-height: var(--jp-lh-button);
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(67, 0, 28, 0.2);
  transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease;
}

.jp-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.jp-button--outline {
  background: transparent;
  border: 1px solid var(--jp-pink);
  color: var(--jp-pink);
  box-shadow: none;
}

.jp-button--outline:hover {
  background: rgba(255, 190, 216, 0.08);
}

.jp-button:focus-visible,
.jp-text-link:focus-visible,
.jp-accordion__trigger:focus-visible {
  outline: 3px solid rgba(244, 169, 196, 0.65);
  outline-offset: 3px;
}

.jp-text-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--jp-pink);
  font-size: var(--jp-fs-button);
  line-height: var(--jp-lh-button);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* Fondo continuo: Hero + introducción tradicional */
.jp-opening {
  position: relative;
  isolation: isolate;
  background-color: #031d35;
}

/* La ilustración ocupa hero + introducción. En mobile lleva 8px de margen lateral
   (medido en PDF mobile); desde tablet toma 32px, como en el diseño desktop.
   Su borde inferior queda anclado al final de "Il Giappone Tradizionale". */
.jp-opening::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0.5rem 0; /* 8px medidos en PDF mobile (crop_mob-1.png, fila y=150) */
  background-image: url("../img/backgrounds/contenitore-principale-mobile.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
}

.jp-opening > * {
  position: relative;
  z-index: 1;
}

/* Hero */
.jp-hero {
  min-height: 52rem;
  display: grid;
  place-items: center;
  padding-block: 5rem;
  text-align: center;
  background: transparent;
}

.jp-hero__inner {
  max-width: 58rem;
}

.jp-hero h1 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h1);
  font-weight: 400;
  font-style: normal;
  line-height: var(--jp-lh-h1);
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-hero__lead {
  max-width: 50rem;
  margin: 1.25rem auto 0;
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-header3);
  line-height: var(--jp-lh-header3);
  color: var(--jp-pink-400);
}

.jp-hero__text {
  max-width: 50rem;
  margin: 1rem auto 0;
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-hero__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--jp-pink-400);
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-button);
  font-weight: 600;
  line-height: var(--jp-lh-button);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.jp-hero__cta-icon {
  width: 1.2rem;
  height: 1.2rem;
  border: 1px dashed var(--jp-pink-400);
  border-radius: 50%;
  opacity: 0.7;
}

/* Intro de secciones */
.jp-section-intro {
  min-height: 38rem;
  display: grid;
  place-items: center;
  padding-block: 5rem;
  text-align: center;
  background-position: center;
  background-size: cover;
}

.jp-section-intro--traditional {
  background: transparent;
  align-items: start;
  padding-top: 9rem; /* baja el texto, dejando más aire antes de las siluetas del fondo */
}

.jp-section-intro--contemporary {
  min-height: 44rem;
  align-items: start; /* excepción: en el PDF el texto no está centrado verticalmente, ver nota abajo */
  padding-top: 4rem; /* 64px medidos en PDF mobile */
  padding-bottom: 7rem;
  background-color: #03264a;
  background-image: url("../img/backgrounds/contemporaneo-mobile.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* Excepción (solo --contemporary): el PDF no muestra eyebrow arriba del título en esta
   sección (sí en otras que sí lo usan). Se oculta acá en vez de tocar .jp-eyebrow global. */
.jp-section-intro--contemporary .jp-eyebrow {
  display: none;
}

/* Excepción (solo --contemporary): el título mide 754px en su línea más ancha en el PDF,
   más que los 45rem (720px) del contenedor compartido con --traditional. Se amplía acá
   en vez de tocar .jp-section-intro__content global, sin evidencia sobre --traditional. */
.jp-section-intro--contemporary .jp-section-intro__content {
  max-width: 48rem;
}

.jp-section-intro__content {
  max-width: 45rem;
}

.jp-section-intro h2,
.jp-food h2,
.jp-benefits h2,
.jp-event__header h2,
.jp-faq h2,
.jp-split-banner h2 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h2);
  font-weight: 400;
  font-style: normal;
  line-height: var(--jp-lh-h2);
  letter-spacing: 0;
  text-wrap: balance;
  padding-bottom: 0.3em; /* aire extra debajo del título: se ven bien las descendentes (g, p, j, q, y) y no se colapsa como pasaría con margin */
  overflow: visible;
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-section-intro p:not(.jp-eyebrow) {
  max-width: 35rem;
  margin: 1rem auto 0;
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-header3);
  line-height: var(--jp-lh-header3);
  color: var(--jp-pink-400);
}

/* Feature */
.jp-feature {
  display: grid;
  background: linear-gradient(180deg, #032040 0%, #053466 50%, #053972 100%);
}

.jp-feature__media,
.jp-feature__content {
  min-width: 0;
}

.jp-feature__media {
  min-height: 23rem;
}

.jp-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-feature__content {
  padding: 3.5rem 1rem;
}

.jp-feature__content h3 {
  max-width: 100%;
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h3);
  font-weight: 400;
  font-style: normal;
  line-height: var(--jp-lh-h3);
  letter-spacing: 0;
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-feature__intro {
  max-width: 100%;
  margin-top: 1.5rem;
  color: var(--jp-pink);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

/* Acordeones */
.jp-accordion {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px, tal como en Figma */
}

.jp-accordion__item {
  overflow: hidden;
  border-radius: 0.25rem; /* 4px */
  background: var(--jp-bg-panel);
}

.jp-accordion__item--extra {
  display: none;
}

.jp-accordion__item--extra.is-visible {
  display: block;
}

.jp-accordion__more {
  display: block;
  width: fit-content;
  margin: 0.5rem auto 0;
  text-align: center;
  color: var(--jp-pink-400);
}

.jp-accordion__item h3,
.jp-accordion__item h4 {
  font: inherit;
}

.jp-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem; /* 12px / 16px */
  border: 0;
  background: transparent;
  color: var(--jp-pink-200);
  text-align: left;
  cursor: pointer;
}

.jp-accordion__trigger span:first-child {
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-body);
  line-height: 1.5;
  font-weight: 700;
}

.jp-accordion__icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
}

.jp-accordion__icon::before,
.jp-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.85rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.jp-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.jp-accordion__trigger[aria-expanded="true"] .jp-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.jp-accordion__panel {
  overflow: hidden;
}

.jp-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem 0.75rem;
  color: var(--jp-pink-200);
  font-family: var(--jp-font-copy);
  font-weight: 300;
  font-size: var(--jp-fs-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.jp-accordion__body img,
.jp-accordion__image {
  width: 100%; /* flexible en mobile: llega hasta el margen derecho del acordeón */
  max-width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: 0.125rem; /* 2px */
  flex-shrink: 0;
}

@media (min-width: 36rem) {
  .jp-accordion__body {
    flex-direction: row;
    align-items: flex-start;
  }

  .jp-accordion__body img,
  .jp-accordion__image {
    width: 15rem; /* ancho fijo desde tablet/desktop: texto e imagen van lado a lado */
    height: 10rem;
  }
}

/* Gastronomía */
.jp-food {
  padding: 1rem 0 5.5rem; /* 16px top / 88px bottom, mobile (Figma: wrapper 16/16/16/88) */
  background:
    radial-gradient(circle at 30% 0%, rgba(28, 102, 153, 0.22), transparent 34rem),
    linear-gradient(180deg, #01192f 0%, #032040 22%, #053466 50%, #06396f 78%, #053972 100%);
}

@media (min-width: 48rem) {
  .jp-food {
    padding-top: 9rem; /* 144px exactos, dato de Figma desktop */
    padding-bottom: 5rem;
  }
}

/* Video: respeta el margen global de 16px como el resto de la sección.
   Oculto desde tablet/desktop. El botón de play ya viene dibujado dentro
   de la propia imagen placeholder. */
.jp-food__video {
  position: relative;
  margin-bottom: 4rem; /* 64px exactos, gap hacia "Cucina Giapponese" */
  padding-inline: 1rem; /* 16px exactos, mismo margen global */
  text-align: center;
}

.jp-food__video-mobile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.125rem; /* 2px exactos, dato de Figma */
}

.jp-food__video-mobile img {
  display: block;

  width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .jp-food__video {
    display: none; /* el video (y el placeholder) solo se muestran en mobile */
  }
}

.jp-food__header,
.jp-food__culture {
  max-width: 54.375rem; /* 870px exactos, dato de Figma */
  margin-inline: auto;
  text-align: center;
}

.jp-food__dishes-text {
  max-width: 54.375rem; /* 870px exactos, dato de Figma */
  margin-inline: auto;
}

/* Excepción: el PDF no muestra eyebrow arriba del título en esta sección
   (mismo caso que .jp-section-intro--contemporary). Se oculta para que el
   padding-top de 144px caiga exacto sobre el H2, no sobre el eyebrow. */
.jp-food__header .jp-eyebrow {
  display: none;
}

.jp-food__header p,
.jp-food__culture > p {
  max-width: 100%;
  margin-top: 1.5rem; /* 24px exactos, dato de Figma */
  color: var(--jp-text-muted);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-food__dishes-text > p {
  max-width: 100%;
  margin-top: 1.5rem; /* 24px exactos, dato de Figma */
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-food h3 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h3);
  font-weight: 400;
  font-style: normal;
  line-height: var(--jp-lh-h3);
  letter-spacing: 0;
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-divider {
  display: block;
  width: 2.3125rem; /* 37px exactos, dato de Figma */
  height: 5.3125rem; /* 85px exactos, dato de Figma */
  margin: 4rem auto; /* 64px arriba y abajo, mobile */
}

@media (min-width: 48rem) {
  .jp-divider {
    margin: 6.5rem auto; /* 104px arriba y abajo, desktop */
  }
}

.jp-food__dishes {
  max-width: 83.5rem; /* 1336px exactos, dato de Figma */
  margin-inline: auto;
  padding-inline: 1rem; /* 16px exactos, mobile */
  text-align: center;
}

@media (min-width: 48rem) {
  .jp-food__dishes {
    padding-inline: 2rem; /* 32px exactos, desde tablet */
  }
}

.jp-dish-grid {
  display: grid;
  grid-template-columns: 1fr; /* apilados uno debajo del otro en mobile */
  gap: 3rem; /* 48px exactos, entre cada plato */
  margin-top: 2.5rem;
}

.jp-dish img {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.28));
}

.jp-dish h4 {
  margin-top: 0.65rem;
  color: var(--jp-pink);
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-subtitle);
  line-height: var(--jp-lh-subtitle);
}

.jp-card-grid {
  display: grid;
  gap: 1.5rem; /* 24px: con contenedor de 870px da columnas de 423px exactas */
  margin-top: 2.5rem;
  text-align: left;
}

.jp-card {
  overflow: hidden;
  border-radius: 0.25rem;
}

.jp-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.jp-card__content {
  padding: 1.2rem 0;
  text-align: center;
}

.jp-card h4 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-header3);
  line-height: var(--jp-lh-header3);
  font-weight: 400;
  color: var(--jp-pink-400);
}

.jp-card__subtitle {
  margin-top: 0.4rem;
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
  font-weight: 700;
}

.jp-card__content > p:last-child {
  margin-top: 0.7rem;
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
  font-weight: 400;
}

.jp-food__cta {
  max-width: 42rem;
  margin: 3rem auto 0;
  text-align: center;
}

.jp-food__cta p {
  color: var(--jp-pink-400);
  font-size: var(--jp-fs-subtitle);
  line-height: var(--jp-lh-subtitle);
}

/* Banner artistas */
.jp-split-banner {
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: 5.5rem 1rem; /* 88px / 16px exactos, mobile (Figma 393px) */
  background: linear-gradient(180deg, #01192f 0%, #032040 22%, #053466 50%, #06396f 78%, #053972 100%);
}

@media (min-width: 48rem) {
  .jp-split-banner {
    padding-inline: 2rem; /* 32px exactos, desde tablet */
  }
}

@media (min-width: 70rem) {
  .jp-split-banner {
    padding-block: 6.5rem; /* 104px exactos, desktop (Figma 1400px) */
  }
}

.jp-split-banner__inner {
  display: grid;
  gap: 3rem; /* 48px exactos, entre contenido y media (mobile y desktop) */
  max-width: 87.5rem; /* 1400px exactos, para no estirarse en pantallas muy anchas */
  width: 100%;
  margin-inline: auto;
}

.jp-split-banner__content {
  padding: 0;
}

.jp-split-banner__content p {
  max-width: 42rem;
  margin-top: 1.5rem; /* 24px exactos, mobile */
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

@media (min-width: 48rem) {
  .jp-split-banner__content p {
    margin-top: 2.5rem; /* 40px exactos, desde tablet (Figma desktop) */
  }
}

.jp-split-banner__media {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem; /* 32px exactos, entre el bloque de videos y "Saperne di più" */
}

.jp-split-banner__videos-wrap {
  position: relative;
  width: 100%;
}

.jp-split-banner__videos {
  display: flex;
  gap: 1.5rem; /* 24px exactos, entre videos */
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge/IE viejo */
}

.jp-split-banner__videos::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.jp-split-banner__video {
  position: relative;
  display: block;
  flex: 0 0 85%; /* mobile: el siguiente video asoma cortado, como gancho para el scroll */
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  aspect-ratio: 340 / 495;
  cursor: pointer;
  scroll-snap-align: start;
}

@media (min-width: 48rem) {
  .jp-split-banner__videos {
    overflow-x: hidden; /* los videos extra quedan ocultos: se revelan al pasar el mouse por el borde */
    scroll-snap-type: none;
  }

  .jp-split-banner__video {
    flex: 0 0 calc(50% - 0.75rem); /* mismo ancho que el grid original de 2 columnas (gap 1.5rem) */
    scroll-snap-align: none;
  }
}

.jp-split-banner__video img,
.jp-split-banner__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Zonas invisibles en los bordes: al pasar el mouse, disparan el auto-scroll (solo desktop) */
.jp-split-banner__nav {
  display: none;
}

@media (min-width: 48rem) {
  .jp-split-banner__nav {
    display: block;
    position: absolute;
    inset-block: 0;
    width: 3.5rem;
    z-index: 2;
    cursor: pointer;
  }

  .jp-split-banner__nav--prev {
    left: 0;
  }

  .jp-split-banner__nav--next {
    right: 0;
  }
}

.jp-split-banner__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.jp-split-banner__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent var(--jp-blue-200);
}

.jp-text-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Beneficios */
.jp-benefits {
  padding-block: 5.5rem; /* 88px exactos, mobile (Figma 393px) */
  text-align: center;
  background: linear-gradient(180deg, #01192f 0%, #032040 22%, #053466 50%, #06396f 78%, #053972 100%);
}

@media (min-width: 70rem) {
  .jp-benefits {
    padding-block: 6.5rem; /* 104px exactos, desktop (Figma 1400px) */
  }
}

.jp-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* 48px exactos, entre título+texto / actividades / botón */
  width: min(100% - 2rem, 87.5rem); /* 16px de gutter en mobile, hasta 1400px */
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .jp-benefits__inner {
    width: min(100% - 4rem, 87.5rem); /* 32px de gutter desde tablet, 1336px de contenido */
  }
}

.jp-benefits__header p {
  max-width: 50rem;
  margin: 1.5rem auto 0; /* 24px exactos, entre título y texto */
  color: var(--jp-pink-200);
}

.jp-benefits__grid {
  display: grid;
  gap: 2.5rem; /* 40px exactos */
}

.jp-benefits__grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8px exactos, entre ícono y texto */
}

.jp-benefits__icon {
  display: block;
  width: 2rem;
  height: 2rem;
}

.jp-benefits__grid p {
  color: var(--jp-pink);
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
  font-weight: 700;
}

.jp-benefits .jp-button {
  margin-top: 0; /* el gap de jp-benefits__inner ya separa el botón */
}

.jp-text-link--small {
  margin-top: 0;
  font-size: var(--jp-fs-caption);
}

/* Evento */
.jp-event {
  padding-top: 5.5rem; /* 88px exactos, mobile (Figma 393px) */
  padding-bottom: 6.5rem; /* 104px exactos, mobile (Figma 393px) */
  background:
  /*  linear-gradient(rgba(3, 49, 84, 0.88), rgba(3, 49, 84, 0.92)),*/
    url("../img/backgrounds/event-sakura-mobile.webp") bottom right / cover no-repeat;
}

.jp-event__header {
  max-width: 54.125rem; /* 866px exactos */
  margin-inline: auto;
  text-align: center;
}

.jp-event__header h2 {
  line-height: 4rem; /* 64px exactos, título en una sola línea */
}

.jp-event__header > p:last-child {
  max-width: 100%;
  margin-top: 1.5rem; /* 24px exactos */
  color: var(--jp-text-muted);
}

.jp-event__panel {
  display: flex;
  flex-direction: column; /* apiladas en mobile/tablet, no entran lado a lado */
  gap: 0.5rem; /* 8px exactos, igual que el gap entre Fecha y Donde */
  width: 83.5rem; /* 1336px exactos */
  max-width: 100%;
  padding-inline: 1rem; /* 16px exactos left/right en mobile */
  margin: 1.5rem auto 0; /* 24px exactos, gap desde el header */
}

.jp-event__panel > div {
  width: 100%;
}

@media (min-width: 70rem) {
  .jp-event__panel {
    flex-direction: row;
    align-items: stretch; /* Biglietti ocupa toda la altura de la fila */
    gap: 0.5rem; /* 8px exactos, igual al gap horizontal entre las dos fechas */
    padding-inline: 0; /* el ancho fijo de 1336px ya centra el panel */
  }

  .jp-event__panel > div {
    width: 41.5rem; /* 664px exactos */
    flex: 1 1 0;
  }
}

/* Grupo Fecha + Donde: en desktop funcionan juntos como una sola columna */
.jp-event__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px exactos */
}

.jp-event__dates,
.jp-event__place-box,
.jp-event__tickets {
  background: var(--jp-blue-100);
  border: 1px solid var(--jp-bg-panel); /* Blue300 */
  border-radius: 0.25rem; /* 4px */
  padding: 2rem; /* 32px exactos */
  text-align: center;
}

.jp-event__dates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px exactos, entre las dos fechas */
}

.jp-event__date {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px exactos, entre las líneas de cada fecha */
}

@media (min-width: 70rem) {
  .jp-event__dates {
    flex-direction: row; /* las dos fechas van una al lado de la otra */
  }

  .jp-event__date {
    flex: 1 1 0;
  }
}

.jp-event__dates p,
.jp-event__place-row {
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-caption);
  line-height: var(--jp-lh-caption);
}

.jp-event__dates span {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-header3);
  line-height: var(--jp-lh-header3);
  color: var(--jp-pink-400);
}

.jp-event__dates strong,
.jp-event__place {
  display: block;
  color: var(--jp-pink-400);
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h2);
  font-weight: 400;
  line-height: var(--jp-lh-h2);
}

.jp-event__place-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px exactos, entre la fila "Dove" y "Fiere di Udine" */
}

@media (min-width: 70rem) {
  .jp-event__place-box {
    flex: 1; /* crece para que la columna izquierda iguale la altura de Biglietti */
    justify-content: center;
  }
}

.jp-event__place-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px exactos, ícono y texto en la misma línea */
  color: var(--jp-pink-400); /* "Dove" destacado, no es una caption muda */
}

.jp-event__icon {
  display: block;
  margin: 0 auto;
}

.jp-event__icon--inline {
  margin: 0;
}

.jp-event__tickets {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px exactos, entre ícono/título/filas de precios */
}

.jp-event__tickets h3 {
  font-family: var(--jp-font-sans);
  font-size: var(--jp-fs-body);
  font-weight: 700;
  font-style: normal;
  line-height: var(--jp-lh-body);
  color: var(--jp-pink-400);
}

.jp-event__ticket-row {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px exactos, entre el label y la descripción */
  padding-bottom: 0.5rem; /* 8px exactos */
  border-bottom: 1px solid var(--jp-blue-200);
}

.jp-event__ticket-row--last {
  border-bottom: 0;
}

.jp-event__ticket-label {
  color: var(--jp-pink-200);
  font-weight: 700;
  font-size: var(--jp-fs-caption);
  line-height: var(--jp-lh-caption);
}

.jp-event__ticket-desc {
  color: var(--jp-text-muted);
  font-size: var(--jp-fs-caption);
  line-height: var(--jp-lh-caption);
}

.jp-event__tickets-info {
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-caption);
  line-height: var(--jp-lh-caption);
}

.jp-event__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

/* FAQ */
.jp-faq {
  padding-block: 5.5rem; /* 88px exactos, mobile (Figma 393px) */
  background:
    url("../img/backgrounds/faq-sakura.webp") center / cover no-repeat; /* centrado en mobile */
}

.jp-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.jp-faq__inner header {
  max-width: 47.5rem; /* 760px exactos */
}

.jp-faq .jp-eyebrow {
  display: none;
}

/* Título del FAQ: en Figma (frame mobile 393px) se ve fijo en 56/64,
   sin escalar como el resto de los h2 compartidos (clamp topea igual
   en 56px desde desktop, así que esto no afecta esa vista). */
.jp-faq h2 {
  font-size: 3.5rem; /* 56px */
}

.jp-accordion--faq {
  margin-top: 2.5rem; /* 40px exactos, mobile (Figma 393px) */
  gap: 0.5rem; /* 8px exactos, distancia entre desplegables */
  max-width: 47.5rem; /* 760px exactos */
  width: 100%;
  text-align: left; /* el texto de las preguntas va alineado a la izquierda dentro del acordeón */
}

/* Excepciones de color/tipografía propias de FAQ (no tocan el resto de los acordeones del sitio) */
.jp-accordion--faq .jp-accordion__item {
  background: #01244c; /* ítem inactivo */
}

.jp-accordion--faq .jp-accordion__item.is-open {
  background: #011832; /* ítem activo */
}

.jp-accordion--faq .jp-accordion__trigger {
  min-height: 3rem; /* 48px exactos */
  color: var(--jp-pink-400); /* el ícono + hereda este color */
}

.jp-accordion--faq .jp-accordion__trigger span:first-child {
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  color: var(--jp-pink-200);
}

.jp-accordion--faq .jp-accordion__item.is-open .jp-accordion__trigger span:first-child {
  font-weight: 700;
  font-size: 1rem; /* 16px */
  line-height: 1.625rem; /* 26px */
  color: var(--jp-pink-400);
}

/* CTA final */
.jp-final-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px exactos, confirmado en Frame 4114 (el que tiene fill Pink200) */
  width: min(100% - 2rem, 87.5rem); /* 16px de margen a cada lado en mobile */
  margin: 0 auto 5rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem; /* top/right/bottom/left: 8/16/8/8, dato de Figma */
  border-radius: 0.5rem;
  background: var(--jp-pink-200); /* Capa exterior: fondo rosa claro */
}

.jp-final-cta__calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0.75rem; /* 12px exactos: Settembre a la fila de fechas (Frame 4115 gap) */
  column-gap: 0.5rem; /* 8px exactos: entre cada celda de fecha (Frame 4132 gap) */
  padding: 0.5rem 0.75rem; /* 8px arriba/abajo, 12px izquierda/derecha padding del contenedor */
  text-align: left;
  color: #06396f; /* Blue100, medido en Figma */
}

.jp-final-cta__calendar > p {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-header3);
  line-height: var(--jp-lh-header3);
  color: #ff63a2; /* Pink500, medido en Figma */
  text-align: center; /* Alineación centrada en mobile */
}

.jp-final-cta__calendar div {
  display: grid;
  padding-bottom: 0.25rem; /* 4px exactos, solo abajo (dato de Figma: 0/0/4/0) */
  border-bottom: 1px solid var(--jp-pink-400); /* separador horizontal entre fechas */
}

.jp-final-cta__calendar span {
  font-size: var(--jp-fs-body);
  line-height: 1.5rem;
}

.jp-final-cta__calendar strong,
.jp-final-cta__calendar .jp-final-cta__number {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h2);
  line-height: var(--jp-lh-h2);
  font-weight: 400;
}

/* Panel principal: contenedor con position:relative para apilar las capas */
.jp-final-cta__panel {
  container-type: inline-size; /* permite medir el ancho propio del panel */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0.375rem;
  background: transparent;
}

.jp-final-cta__picture {
  display: block;
  width: 100%;
}

/* Dentado tipo "sello postal", generado con CSS (no depende del asset de foto).
   Dos pseudo-elementos con círculos transparentes repetidos que "muerden" el
   borde superior e inferior del panel, dejando ver el rosa del fondo exterior. */
/* Dentado tipo "sello postal", generado con CSS (fallback para cuando el
   asset de foto NO trae el borde dibujado). Si usás una imagen que ya
   incluye el dentado, agregá la clase --native-edge al panel para apagar
   este pseudo-elemento y que no se dupliquen. */
.jp-final-cta__panel::before,
.jp-final-cta__panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.875rem; /* 14px: radio de cada onda */
  background-image: radial-gradient(
    circle at 1.1375rem 0,
    var(--jp-pink-200) 0.875rem,
    transparent 0.9375rem
  );
  background-size: 2.275rem 0.875rem; /* 36.4px de mosaico = 28px de diámetro + 30% de espacio */
  background-repeat: repeat-x;
  z-index: 2;
  pointer-events: none;
  display: none; /* oculto por defecto: solo se muestra si el panel supera 1114px */
}

@container (min-width: 1114px) {
  .jp-final-cta__panel::before,
  .jp-final-cta__panel::after {
    display: block;
  }
}

.jp-final-cta__panel--native-edge::before,
.jp-final-cta__panel--native-edge::after {
  content: none;
}

.jp-final-cta__panel::before {
  top: 0;
}

.jp-final-cta__panel::after {
  bottom: 0;
  transform: scaleY(-1);
}

/* Capa 2 (+ Capa 3 degradado + borde ondulado, ya incluidos en el propio asset) */
.jp-final-cta__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Capa 4: contenido HTML, alineado a la izquierda sobre la zona oscura.
   En mobile: alineado al borde inferior del container (bottom: 0) */
.jp-final-cta__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px exactos, dato de Figma */
  padding: 1.5rem 1.25rem 1.5rem; /* Alineado al borde inferior de la imagen */
  z-index: 1;
}

.jp-final-cta__content h2 {
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-h2);
  font-weight: 400;
  line-height: var(--jp-lh-h2);
  background: var(--jp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.jp-final-cta__content p {
  color: var(--jp-pink-200);
  font-size: var(--jp-fs-body);
  line-height: var(--jp-lh-body);
}

.jp-final-cta__content .jp-button {
  align-self: flex-start;
}

/* ==========================================================
   TABLET
   ========================================================== */
@media (min-width: 48rem) {
  .jp-opening::before {
    inset: 0 2rem 0;
    background-image: url("../img/backgrounds/contenedor-principal.webp");
  }

  .jp-section-intro--contemporary {
    min-height: 48rem;
  }

  .jp-hero {
    min-height: 60rem;
  }

  .jp-section-intro--traditional {
    min-height: 42rem;
  }

  .jp-container {
    width: min(100% - 4rem, 72rem);
  }

  /* FAQ: valores originales (medidos en el PDF desktop), a partir de tablet */
  .jp-faq {
    padding-block: 6.5rem; /* 104px exactos */
    background-position: bottom left; /* fixed a la izquierda y abajo desde tablet */
  }

  .jp-accordion--faq {
    margin-top: 5rem; /* 80px exactos */
  }

  .jp-hero {
    background: transparent;
  }

  .jp-section-intro--traditional {
    background: transparent;
  }
  .jp-section-intro--contemporary {
    background-image: url("../img/backgrounds/contemporaneo.webp");
    background-position: center bottom;
    background-size: cover;
  }

  .jp-feature {
    grid-template-columns: 1fr 1fr;
  }

  .jp-feature--reverse .jp-feature__media {
    order: 2;
    padding-right: 0;
    padding-left: var(--jp-feature-gap);
  }

  .jp-feature--reverse .jp-feature__content {
    order: 1;
    padding-right: 0;
    padding-left: var(--jp-feature-gap);
  }

  .jp-feature__media {
    min-height: 38rem;
    padding-right: var(--jp-feature-gap);
  }

  .jp-feature__media img {
    min-height: 0;
  }

  .jp-feature__content {
    align-self: center;
    padding: 4rem 0;
    padding-right: var(--jp-feature-gap);
  }

  .jp-dish-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem; /* 32px exactos, dato de Figma */
    align-items: start;
  }

  .jp-dish img {
    height: 15.42rem; /* 246.77px, fila 1 */
    aspect-ratio: auto;
  }

  .jp-dish:nth-child(3) img,
  .jp-dish:nth-child(4) img,
  .jp-dish:last-child img {
    height: 14.8125rem; /* 237px, fila 2 */
  }

  .jp-dish:nth-child(1) {
    grid-column: 2 / span 2;
  }

  .jp-dish:nth-child(2) {
    grid-column: 4 / span 2;
  }

  .jp-dish:nth-child(3) {
    grid-column: 1 / span 2;
  }

  .jp-dish:nth-child(4) {
    grid-column: 3 / span 2;
  }

  .jp-dish:last-child {
    grid-column: 5 / span 2;
    width: auto;
    justify-self: stretch;
  }

  .jp-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jp-split-banner__inner {
    grid-template-columns: var(--jp-split-content) var(--jp-split-media);
  }

  .jp-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .jp-event {
    background-image: url("../img/backgrounds/event-sakura.webp"); /* imagen original desde tablet */
  }

  .jp-final-cta {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem; /* 16px exactos */
    width: min(100% - 2rem, 87.5rem);
    padding: 2rem;
  }

  .jp-final-cta__calendar {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: 9.75rem; /* 156px exactos */
    flex-shrink: 0;
    padding: 0;
    gap: 0.75rem; /* 12px exactos */
    justify-content: flex-start;
  }

  .jp-final-cta__calendar > p {
    text-align: left;
  }

  .jp-final-cta__calendar div {
    height: 5.75rem;
    flex: none;
    align-content: start;
  }

  .jp-final-cta__panel {
    flex: 1;
    min-height: 39.125rem;
    display: block;
    background: #011832;
  }

  .jp-final-cta__picture {
    display: contents;
  }

  .jp-final-cta__photo {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .jp-final-cta__content {
    position: absolute;
    left: 4.75rem;
    top: 6.375rem;
    bottom: auto;
    right: auto;
    max-width: 24.875rem;
    padding: 0;
  }
}

/* ==========================================================
   DESKTOP
   ========================================================== */
@media (min-width: 70rem) {
  .jp-hero {
    min-height: 48rem;
  }

  .jp-section-intro {
    min-height: 34rem;
  }

  .jp-section-intro--traditional {
    min-height: 42rem;
  }

  .jp-section-intro--contemporary {
    min-height: 57rem;
    padding-top: 13.4rem; /* 215px medidos en PDF desktop */
  }

  .jp-feature__media {
    min-height: 45rem;
  }

  .jp-feature__media img {
    min-height: 0;
  }

  .jp-card-grid {
    gap: 1.5rem;
  }
}

/* Aparición suave de secciones al hacer scroll */
.jp-reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 700ms ease, transform 700ms ease;
}

.jp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .jp-page *,
  .jp-page *::before,
  .jp-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}