/* ==========================================================================
   New Concept Bar — sections.css
   Hero, About, Catalog, Events, Contact, Single, internal pages
   ========================================================================== */

/* The reveal system now lives in showcase.css (JS-gated, with variants). */

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ncb-about__top { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.ncb-about__title { font-size: var(--text-3xl); margin-top: 1rem; }
.ncb-about__lead p + p { margin-top: 1rem; }
.ncb-about__body { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.ncb-about__visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.ncb-about__figure { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ncb-line); box-shadow: var(--shadow); }
.ncb-about__figure--wide { margin-top: clamp(1.6rem, 5vw, 3.6rem); }
.ncb-about__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ncb-about__figure:hover img { transform: scale(1.04); }
.ncb-about__figure picture, .ncb-about__figure .ncb-zoom { display: block; width: 100%; height: 100%; }
.ncb-about__values { display: flex; flex-direction: column; gap: 1rem; }

/* ==========================================================================
   CATALOG GRID (archivo de producto y taxonomía; la sección de portada se retiró)
   ========================================================================== */
.ncb-catalog__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.ncb-events__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.ncb-events__title { font-size: var(--text-3xl); margin: 1rem 0 1.2rem; }
.ncb-events__points { display: flex; flex-direction: column; gap: .7rem; margin: 1.6rem 0 2rem; }
.ncb-events__points li { display: flex; align-items: center; gap: .7rem; color: var(--ncb-text); }
.ncb-events__points .ncb-icon { width: 18px; height: 18px; color: var(--ncb-gold-2); flex: none; }
.ncb-events__gallery { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ncb-events__shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ncb-line); box-shadow: var(--shadow-sm); }
.ncb-events__shot picture, .ncb-events__shot .ncb-zoom { display: block; width: 100%; height: 100%; }
.ncb-events__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--dur-slow) var(--ease); }
.ncb-events__shot:hover img { transform: scale(1.05); }
.ncb-events__shot.is-a { grid-column: 1; grid-row: 1 / span 2; }              /* vertical (flair) */
.ncb-events__shot.is-b { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; }  /* apaisada */
.ncb-events__shot.is-c { grid-column: 2; grid-row: 2; aspect-ratio: 3 / 2; }  /* apaisada */
.ncb-events__shot.is-d { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 5 / 2; } /* banner */
.ncb-events__badge { position: absolute; left: 50%; bottom: calc(clamp(1.5rem, 25%, 4rem)); transform: translateX(-50%); pointer-events: none; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ncb-black) 72%, transparent); border: 1px solid color-mix(in srgb, var(--ncb-gold-2) 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--font-display); color: var(--ncb-gold-3); letter-spacing: .04em; box-shadow: var(--shadow); }
.ncb-events__badge .ncb-icon { width: 18px; height: 18px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ncb-contact { position: relative; overflow-x: clip; }
.ncb-contact__glow { position: absolute; left: -8%; bottom: 0; width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,46,136,.12), transparent 62%); pointer-events: none; }
.ncb-contact__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.ncb-contact__title { font-size: var(--text-3xl); margin: 1rem 0 1.2rem; }
.ncb-contact__methods { display: flex; flex-direction: column; gap: .7rem; margin-top: 2rem; }
.ncb-contact__method { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--ncb-line); transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease); }
a.ncb-contact__method:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--ncb-gold-2) 45%, var(--ncb-line-solid)); background: color-mix(in srgb, var(--ncb-surface) 50%, transparent); }
.ncb-contact__method-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; color: var(--ncb-gold-3); background: color-mix(in srgb, var(--ncb-gold-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ncb-gold-2) 26%, transparent); }
.ncb-contact__method-icon--accent { color: var(--ncb-accent); background: color-mix(in srgb, var(--ncb-accent) 12%, transparent); border-color: color-mix(in srgb, var(--ncb-accent) 30%, transparent); }
.ncb-contact__method-icon--whatsapp { color: #25d366; background: color-mix(in srgb, #25d366 14%, transparent); border-color: color-mix(in srgb, #25d366 32%, transparent); }
.ncb-contact__method-icon .ncb-icon { width: 22px; height: 22px; }
.ncb-contact__method-body { display: flex; flex-direction: column; gap: .1rem; }
.ncb-contact__method-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ncb-muted); }
.ncb-contact__method-value { font-size: 1rem; color: var(--ncb-text); font-weight: 600; }

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.ncb-single__back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2rem; color: var(--ncb-muted); font-size: .85rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ncb-single__back .ncb-icon { width: 18px; height: 18px; transform: rotate(180deg); }
.ncb-single__back:hover { color: var(--ncb-gold-3); }
.ncb-single__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
/* No fixed aspect-ratio here (unlike the catalogue cards, which need a uniform
   grid): the figure takes the shot's own proportions, so the image fills the
   column edge to edge and nothing is ever cropped. Product shots range from
   0.4 (tall bottles) to 1.4 (landscape catalogue sheets); max-height keeps the
   tallest ones from pushing the sticky column past the viewport. */
.ncb-single__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ncb-line); background: radial-gradient(circle at 50% 30%, #16131a, #0a0a0c 80%); }
.ncb-single__img { display: block; width: 100%; }
.ncb-single__media picture { display: block; width: 100%; }
/* The shot is wrapped in the .ncb-zoom button (click to expand), which has to
   span the figure or the image would collapse to its intrinsic size. */
.ncb-single__media .ncb-zoom { display: block; width: 100%; }
/* Same as .ncb-card__media img: the class lands on <picture>, not on <img>. */
/* Same trick as .ncb-card__media img: a shot short enough to stay under the cap
   keeps its natural ratio and is never cropped; a tall one hits the cap and
   `cover` zooms it to fill the column instead of leaving bands down the sides.
   The lightbox is where the whole image is always available uncropped. */
.ncb-single__media img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: cover; object-position: center; }
.ncb-single__line { display: inline-flex; margin-bottom: 1rem; }
.ncb-single__title { font-size: var(--text-3xl); }
.ncb-single__tagline { font-family: var(--font-body); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: .6rem 0 1.4rem; }
.ncb-single__content { margin-bottom: 1.6rem; }
.ncb-single__features { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.2rem; margin-bottom: 2rem; }
.ncb-single__features li { display: flex; align-items: center; gap: .5rem; color: var(--ncb-text); font-size: .92rem; }
.ncb-single__features .ncb-icon { width: 17px; height: 17px; color: var(--ncb-gold-2); flex: none; }
.ncb-single__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.ncb-flavors { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.ncb-flavors__head { margin-bottom: 1.8rem; }
.ncb-flavors__title { font-size: var(--text-2xl); margin-top: .8rem; }
.ncb-flavors__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.ncb-flavor {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.1rem .5rem 1rem; border-radius: var(--radius); text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ncb-surface) 62%, transparent), color-mix(in srgb, #0c0d12 55%, transparent));
  border: 1px solid var(--ncb-line);
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.ncb-flavor:hover { transform: translateY(-4px); border-color: var(--ncb-gold-soft); box-shadow: var(--shadow); }
.ncb-flavor__icon {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-size: 30px; line-height: 1;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--ncb-gold-2) 18%, transparent), transparent 68%), color-mix(in srgb, #ffffff 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ncb-gold-2) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--dur) var(--ease);
}
.ncb-flavor:hover .ncb-flavor__icon { transform: scale(1.08) rotate(-4deg); }
/* Real ingredient photo as a clean white circular badge (emoji is the fallback). */
.ncb-flavor.has-img .ncb-flavor__icon { background: #fff; overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--ncb-gold-2) 34%, rgba(255,255,255,.3)); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ncb-flavor__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ncb-flavor__name { font-size: .82rem; line-height: 1.25; color: var(--ncb-text); }
@media (max-width: 520px) { .ncb-flavors__grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .6rem; } .ncb-flavor__icon { width: 50px; height: 50px; font-size: 26px; } .ncb-flavor__name { font-size: .76rem; } }

/* ==========================================================================
   INTERNAL PAGES / POSTS / 404
   ========================================================================== */
.ncb-page { padding-top: clamp(6rem, 5rem + 4vw, 8rem); }
.ncb-page__head { margin-bottom: 2.2rem; }
.ncb-page__title { font-size: var(--text-3xl); margin-top: .6rem; }
.ncb-page__media { margin-bottom: 2.2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ncb-line); }
.ncb-page__img { width: 100%; height: auto; }

.ncb-posts { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.ncb-post-card { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--ncb-line); background: linear-gradient(180deg, var(--ncb-surface), var(--ncb-surface-2)); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ncb-post-card:hover { transform: translateY(-4px); border-color: var(--ncb-gold-soft); }
.ncb-post-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.ncb-post-card__img { width: 100%; height: 100%; object-fit: cover; }
.ncb-post-card__body { padding: 1.5rem; }
.ncb-post-card__date { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ncb-gold); }
.ncb-post-card__title { font-size: 1.5rem; margin: .5rem 0 .6rem; }
.ncb-post-card__title a { color: var(--ncb-text); }
.ncb-post-card__title a:hover { color: var(--ncb-gold-3); }
.ncb-post-card__excerpt { color: var(--ncb-muted); font-size: .95rem; margin-bottom: 1rem; }

.ncb-postnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ncb-line); }
.ncb-postnav a { color: var(--ncb-muted); font-size: .9rem; }
.ncb-postnav a:hover { color: var(--ncb-gold-3); }
.ncb-single-post__foot { margin-top: 2.5rem; }
.ncb-tags a { display: inline-block; margin: 0 .4rem .4rem 0; padding: .3rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--ncb-line-solid); font-size: .78rem; color: var(--ncb-muted); }

.ncb-404 { min-height: 80vh; display: flex; align-items: center; padding-top: 120px; }
.ncb-404__code { display: block; font-family: var(--font-display); font-size: clamp(6rem, 4rem + 14vw, 12rem); line-height: .9; margin-bottom: 1rem; }
.ncb-404__title { font-size: var(--text-2xl); margin: 1rem 0; }
.ncb-404__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.8rem; }
.ncb-empty { text-align: center; color: var(--ncb-muted); padding: 2rem 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 700px) {
  .ncb-catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .ncb-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  /* Removed: .ncb-hero__inner / __scroll / __card--pill — the hero was rebuilt
     as .ncb-lead (showcase.css) and no element carries those classes any more. */
  .ncb-about__top { grid-template-columns: 1fr 1fr; align-items: end; }
  .ncb-about__body { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
  .ncb-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .ncb-events__layout { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; }
  .ncb-contact__grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; }
  .ncb-single__grid { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
  .ncb-single__media { position: sticky; top: 100px; }
}
@media (min-width: 1200px) {
  .ncb-catalog__grid { gap: 1.8rem; }
}