/* ==========================================================================
 * SC CORE — Newsletter CTA
 * Variantes: cream (default), dark, accent.
 * BEM: .sc-news__*
 * ========================================================================== */

/* ── sr-only utility ── */
.sc-sr-only{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ── 1. Tokens — cream (default) ── */
.sc-news{
  --sc-news-bg: var(--sc-bg-warm, #efe9d9);
  --sc-news-ink: var(--sc-ink, #0a0a0a);
  --sc-news-ink-soft: var(--sc-ink-2, #2a2a28);
  --sc-news-pattern: rgba(10,10,10,.07);
  --sc-news-pill-bg: #ffffff;
  --sc-news-pill-border: var(--sc-ink, #0a0a0a);
  --sc-news-btn-bg: var(--sc-ink, #0a0a0a);
  --sc-news-btn-ink: var(--sc-bg, #ffffff);
  --sc-news-strip-bg: #d63031;
  --sc-news-strip-ink: #ffffff;
  --sc-news-title-accent: var(--sc-accent, #1f6b3a);
}

.sc-news--dark{
  --sc-news-bg: #0a0a0a;
  --sc-news-ink: #ffffff;
  --sc-news-ink-soft: rgba(255,255,255,.78);
  --sc-news-pattern: rgba(255,255,255,.06);
  --sc-news-pill-bg: #ffffff;
  --sc-news-pill-border: #ffffff;
  --sc-news-btn-bg: #f5b71c;
  --sc-news-btn-ink: #0a0a0a;
  --sc-news-strip-bg: #f5b71c;
  --sc-news-strip-ink: #0a0a0a;
  --sc-news-title-accent: #f5b71c;
}

.sc-news--accent{
  --sc-news-bg: var(--sc-accent, #1f6b3a);
  --sc-news-ink: #ffffff;
  --sc-news-ink-soft: rgba(255,255,255,.82);
  --sc-news-pattern: rgba(255,255,255,.08);
  --sc-news-pill-bg: #ffffff;
  --sc-news-pill-border: #ffffff;
  --sc-news-btn-bg: #0a0a0a;
  --sc-news-btn-ink: #ffffff;
  --sc-news-strip-bg: #0a0a0a;
  --sc-news-strip-ink: #ffffff;
  --sc-news-title-accent: #ffffff;
}

/* ── 2. Layout ── */
.sc-news{
  position: relative;
  background: var(--sc-news-bg);
  color: var(--sc-news-ink);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--sc-font-display, "Space Grotesk", system-ui, sans-serif);
  /* content-visibility: auto removed — broke GSAP ScrollTrigger parallax. */
  /* Kill Gutenberg block-gap margin — flush against footer. */
  margin-bottom: calc(-1 * var(--wp--style--block-gap, 1.5rem)) !important;
}

/* Neutralize the flow-layout gap between <main> and the footer
   template-part when the Newsletter CTA is present.
   Structure: <main>…<section.sc-news></main> <footer.wp-block-template-part> */
main:has(.sc-news) + .wp-block-template-part,
.sc-front-page:has(.sc-news) + .wp-block-template-part {
  margin-top: 0 !important;
}

.sc-news__inner{
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  padding: 72px 24px 80px;
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: center;
}
@media (min-width: 981px){
  .sc-news__inner{
    grid-template-columns: 1.6fr minmax(0, 1fr);
    gap: 48px;
    padding: 100px 28px 110px;
  }
}

/* ── 3. Eyebrow pill ── */
.sc-news__pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 0 20px;
  font-weight: 500; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--sc-news-pill-border);
  background: color-mix(in oklab, var(--sc-news-pill-bg) 50%, transparent);
  color: var(--sc-news-ink);
}
.sc-news__pill::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc-news-btn-bg);
  box-shadow: 0 0 0 0 var(--sc-news-btn-bg);
}
.sc-news--dark .sc-news__pill::before{ box-shadow: 0 0 8px #f5b71c; }

/* ── 4. Title ── */
.sc-news__title{
  font-weight: 700; letter-spacing: -.04em; line-height: .92;
  font-size: clamp(44px, 6.5vw, 96px);
  margin: 0; max-width: 720px;
  text-wrap: balance;
  color: var(--sc-news-ink);
}
.sc-news__title-accent{
  color: var(--sc-news-title-accent);
  font-weight: 700;
}

/* ── 5. Subtitle ── */
.sc-news__sub{
  font-weight: 400; font-size: 17px; line-height: 1.55;
  margin: 18px 0 32px; max-width: 540px;
  color: var(--sc-news-ink-soft);
}

/* ── 6. Form wrap — Customer Mailer selectors ── */
.sc-news__form-wrap{
  min-height: 64px;
  max-width: 540px;
}

/* Reset wrappers from Customer Mailer home context */
.sc-news__form-wrap .sc-cma-form,
.sc-news__form-wrap .sc-cma-form--home,
.sc-news__form-wrap .sc-cma-form__form{
  background: transparent; border: 0; box-shadow: none;
  padding: 0; border-radius: 0; margin: 0;
}

/* Pill shape for the form row (email + button) */
.sc-news__form-wrap .sc-cma-form__row,
.sc-news__form-wrap .sc-cm-subscribe{
  display: flex; align-items: stretch; gap: 6px;
  padding: 6px;
  background: var(--sc-news-pill-bg);
  border: 1px solid var(--sc-news-pill-border);
  border-radius: 999px;
  box-shadow: 0 18px 38px -16px rgba(0,0,0,.18);
}
.sc-news--dark .sc-news__form-wrap .sc-cma-form__row,
.sc-news--dark .sc-news__form-wrap .sc-cm-subscribe,
.sc-news--accent .sc-news__form-wrap .sc-cma-form__row,
.sc-news--accent .sc-news__form-wrap .sc-cm-subscribe{
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.45);
}

/* Fallback: generic form without Customer Mailer home context */
.sc-news__form-wrap > form:not(.sc-cma-form__form){
  display: flex; align-items: stretch; gap: 6px;
  padding: 6px;
  background: var(--sc-news-pill-bg);
  border: 1px solid var(--sc-news-pill-border);
  border-radius: 999px;
  box-shadow: 0 18px 38px -16px rgba(0,0,0,.18);
}

/* Email input */
.sc-news__form-wrap .sc-cma-form__email,
.sc-news__form-wrap .sc-cm-subscribe input[type="email"],
.sc-news__form-wrap input[type="email"]{
  flex: 1; min-width: 0;
  padding: 14px 18px;
  border: 0; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: 500;
  color: var(--sc-ink, #0a0a0a);
  outline: none;
}
.sc-news__form-wrap .sc-cma-form__email::placeholder,
.sc-news__form-wrap input[type="email"]::placeholder{
  color: rgba(0,0,0,.45);
}

/* Submit button */
.sc-news__form-wrap .sc-cma-form__submit,
.sc-news__form-wrap .sc-cm-subscribe button[type="submit"],
.sc-news__form-wrap button[type="submit"]{
  padding: 12px 22px;
  background: var(--sc-news-btn-bg);
  color: var(--sc-news-btn-ink);
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: opacity .2s;
}
@media (hover: hover) {.sc-news__form-wrap .sc-cma-form__submit:hover,
.sc-news__form-wrap button[type="submit"]:hover{
  opacity: .85;
}}

/* Consent checkbox (Customer Mailer home context) */
.sc-news__form-wrap .sc-cma-form__consent{
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0;
  font-size: 12px; line-height: 1.45;
  color: var(--sc-news-ink-soft);
  cursor: pointer;
}
.sc-news__form-wrap .sc-cma-form__consent input[type="checkbox"]{
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--sc-news-btn-bg);
}
.sc-news__form-wrap .sc-cma-form__consent a{
  color: var(--sc-news-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Success / error messages */
.sc-news__form-wrap .sc-cma-form__ok,
.sc-news__form-wrap .sc-cm-subscribe .message{
  margin-top: 14px;
  font-size: 14px; font-weight: 500;
  color: var(--sc-news-ink);
}

/* Mobile <560: form vertical */
@media (max-width: 559px){
  .sc-news__form-wrap .sc-cma-form__row,
  .sc-news__form-wrap .sc-cm-subscribe,
  .sc-news__form-wrap > form:not(.sc-cma-form__form){
    flex-direction: column;
    border-radius: 22px;
    padding: 10px;
  }
  .sc-news__form-wrap .sc-cma-form__email,
  .sc-news__form-wrap input[type="email"]{ text-align: center; }
  .sc-news__form-wrap .sc-cma-form__submit,
  .sc-news__form-wrap button[type="submit"]{ width: 100%; }
}

/* ── 7. Media — sachet + sticker ── */
.sc-news__media{
  position: relative; justify-self: start;
  width: 100%; max-width: 280px; aspect-ratio: 4 / 5;
}
@media (min-width: 981px){
  .sc-news__media{ justify-self: end; max-width: 380px; }
}

.sc-news__photo{
  position: absolute; inset: 0;
  border-radius: 22px; overflow: hidden;
  transform: rotate(4deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.25);
  will-change: transform;
  border: 1px solid rgba(0,0,0,.08);
  margin: 0;
}
.sc-news--dark .sc-news__photo,
.sc-news--accent .sc-news__photo{ border-color: rgba(255,255,255,.18); }

.sc-news__photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.sc-news__sticker{
  position: absolute; top: -18px; left: -18px;
  padding: 16px 18px;
  width: 88px; height: 88px;
  display: grid; place-items: center; text-align: center; line-height: 1;
  background: var(--sc-news-ink);
  color: var(--sc-news-bg);
  border-radius: 50%;
  font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  transform: rotate(-10deg);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.45);
}
.sc-news--dark .sc-news__sticker{ background: #f5b71c; color: #0a0a0a; }
.sc-news__sticker span{
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; margin-top: 3px;
}

/* ── 8. Typographic pattern ── */
.sc-news__pattern{
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><style>text{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}</style><g fill='%23000000' fill-opacity='0.12'><text x='0' y='44' font-size='56' letter-spacing='-2'>SUPER %C2%B7 COGOLLO %C2%B7 CBD %C2%B7</text><text x='-80' y='110' font-size='56' letter-spacing='-2'>COGOLLO %C2%B7 CBD %C2%B7 SUPER %C2%B7</text><text x='40' y='176' font-size='56' letter-spacing='-2'>CBD %C2%B7 SUPER %C2%B7 COGOLLO %C2%B7</text></g></svg>");
  background-repeat: repeat;
  background-size: 600px 200px;
  z-index: 0; pointer-events: none;
}
.sc-news--dark .sc-news__pattern{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><style>text{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}</style><g fill='%23ffffff' fill-opacity='0.10'><text x='0' y='44' font-size='56' letter-spacing='-2'>SUPER %C2%B7 COGOLLO %C2%B7 CBD %C2%B7</text><text x='-80' y='110' font-size='56' letter-spacing='-2'>COGOLLO %C2%B7 CBD %C2%B7 SUPER %C2%B7</text><text x='40' y='176' font-size='56' letter-spacing='-2'>CBD %C2%B7 SUPER %C2%B7 COGOLLO %C2%B7</text></g></svg>");
}
.sc-news--accent .sc-news__pattern{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><style>text{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}</style><g fill='%23ffffff' fill-opacity='0.13'><text x='0' y='44' font-size='56' letter-spacing='-2'>SUPER %C2%B7 COGOLLO %C2%B7 CBD %C2%B7</text><text x='-80' y='110' font-size='56' letter-spacing='-2'>COGOLLO %C2%B7 CBD %C2%B7 SUPER %C2%B7</text><text x='40' y='176' font-size='56' letter-spacing='-2'>CBD %C2%B7 SUPER %C2%B7 COGOLLO %C2%B7</text></g></svg>");
}

/* Modo oscuro del SITIO (data-theme): el bloque BASE usa el patrón SVG negro, que
   queda INVISIBLE sobre el fondo oscuro. Aplicar el patrón BLANCO al bloque base sin
   modificador. Cubre tema "dark" fijo y "auto" cuando el SO está en oscuro. */
[data-theme="dark"] .sc-news:not(.sc-news--dark):not(.sc-news--accent) .sc-news__pattern{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><style>text{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}</style><g fill='%23ffffff' fill-opacity='0.14'><text x='0' y='44' font-size='56' letter-spacing='-2'>SUPER %C2%B7 COGOLLO %C2%B7 CBD %C2%B7</text><text x='-80' y='110' font-size='56' letter-spacing='-2'>COGOLLO %C2%B7 CBD %C2%B7 SUPER %C2%B7</text><text x='40' y='176' font-size='56' letter-spacing='-2'>CBD %C2%B7 SUPER %C2%B7 COGOLLO %C2%B7</text></g></svg>");
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"] .sc-news:not(.sc-news--dark):not(.sc-news--accent) .sc-news__pattern{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><style>text{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}</style><g fill='%23ffffff' fill-opacity='0.14'><text x='0' y='44' font-size='56' letter-spacing='-2'>SUPER %C2%B7 COGOLLO %C2%B7 CBD %C2%B7</text><text x='-80' y='110' font-size='56' letter-spacing='-2'>COGOLLO %C2%B7 CBD %C2%B7 SUPER %C2%B7</text><text x='40' y='176' font-size='56' letter-spacing='-2'>CBD %C2%B7 SUPER %C2%B7 COGOLLO %C2%B7</text></g></svg>");
  }
}

/* ── 9. Marquee strip ── */
.sc-news__strip{
  position: relative; z-index: 2;
  background: var(--sc-news-strip-bg);
  color: var(--sc-news-strip-ink);
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
}
.sc-news--dark .sc-news__strip,
.sc-news--accent .sc-news__strip{ border-top-color: rgba(255,255,255,.1); }

.sc-news__marquee{
  display: flex; gap: 48px; align-items: center;
  white-space: nowrap;
  font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  animation: sc-news-marquee 32s linear infinite;
  flex-shrink: 0;
  padding-right: 48px;
}
@keyframes sc-news-marquee{
  from{ transform: translateX(0); }
  to{   transform: translateX(-100%); }
}

/* ── 10. Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .sc-news *,
  .sc-news__marquee{
    animation: none !important;
    transition: none !important;
  }
}