/**
 * inloff — Landing del Club Inloff (/club).
 * Marca: navy #1B2540 + cream #F2E8D5 + heart/bronce #C5A184, artesano editorial.
 * Folds navy drenched alternando con cream. Playfair Display + Outfit.
 */

/* Variables globales del Club (el contenido son bloques UX Builder sueltos, sin
   un wrapper .inloff-club; por eso viven en :root, no scopeadas). */
:root {
  --club-navy: var(--inloff-navy, #1B2540);
  --club-navy-deep: var(--inloff-navy-deep, #131A2E);
  --club-cream: var(--inloff-cream-light, #FDFBF7);
  --club-cream-warm: var(--inloff-cream, #F2E8D5);
  --club-heart: var(--inloff-heart, #C5A184);
  --club-heart-d: var(--inloff-heart-dark, #AD8763);
  /* Bronce legible: el heart-dark solo da 3,2:1 sobre crema. */
  --club-bronze-text: var(--inloff-bronze-text, #7E5E3B);
  --club-ink: #2A2E38;
  --club-ink-soft: #6B6357;
  --club-line: rgba(27, 37, 64, 0.12);
}

/* Cada sección va full-width por el [row width="full-width"] de Flatsome; el
   color de banda lo pone el fondo de cada sección. */
[class^="inloff-club-"], [class^="inloff-club-"] * { box-sizing: border-box; }

/* Quitar los 30px por defecto de Flatsome que dejaban huecos blancos entre
   bandas (esta hoja SOLO se carga en /club, así que es seguro):
   - .page-wrapper: separación header → primera sección.
   - .col gutter: separación entre secciones apiladas. */
.content-area.page-wrapper { padding-top: 0 !important; }
.col:has(> .col-inner > [class^="inloff-club-"]) { padding-bottom: 0 !important; }
.inloff-club-hero, .inloff-club-perks, .inloff-club-manifesto,
.inloff-club-how, .inloff-club-reviews, .inloff-club-faq, .inloff-club-cta {
  font-family: var(--inloff-font-sans, 'Outfit', sans-serif);
  color: var(--club-ink);
  /* Banda a todo el ancho del viewport (rompe el contenedor 1170 del tema).
     Sin width:100vw para no provocar scrollbar horizontal. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.inloff-club__wrap {
  max-width: var(--inloff-max, 1170px);
  margin: 0 auto;
  padding: 0 24px;
}
.inloff-club__wrap--narrow { max-width: 760px; }

.inloff-club__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--club-heart);
  margin: 0 0 18px;
}
.inloff-club__eyebrow--dark { color: var(--club-bronze-text); }

.inloff-club__h2 {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--club-navy);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.inloff-club__h2--light { color: var(--club-cream); }

/* ============================ 1. HÉROE ============================ */
.inloff-club-hero {
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(197, 161, 132, 0.16), transparent 55%),
    linear-gradient(160deg, var(--club-navy) 0%, var(--club-navy-deep) 100%);
  color: var(--club-cream);
}
.inloff-club-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(72px, 12vw, 132px) 24px clamp(56px, 8vw, 96px);
  text-align: center;
}
.inloff-club-hero__title {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: clamp(40px, 8vw, 76px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #fff;
  text-wrap: balance;
}
.inloff-club-hero__lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: rgba(253, 251, 247, 0.86);
  max-width: 60ch;
  margin: 0 auto 36px;
}
.inloff-club-hero__lead strong { color: var(--club-heart); font-weight: 600; }
.inloff-club-hero__form { max-width: 440px; margin: 0 auto; }
.inloff-club-hero__reassure {
  font-size: 13px;
  color: rgba(253, 251, 247, 0.6);
  margin: 14px 0 0;
}
.inloff-club-hero__proof {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  gap: 10px 26px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(253, 251, 247, 0.72);
}
.inloff-club-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.inloff-club-hero__stars { color: var(--club-heart); letter-spacing: 1px; }

/* --- Form de alta sobre navy (reestiliza el shortcode [inloff_signup_form]) --- */
/* El shortcode trae su propia caja crema + honeypot; los neutralizamos aquí. */
.inloff-club-hero__form .inloff-signup-inline {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto;
}
.inloff-club-hero__form .inloff-popup__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.inloff-club-hero__form .inloff-signup-inline__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inloff-club-hero__form .inloff-signup-inline__input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.97);
  color: var(--club-navy);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.inloff-club-hero__form .inloff-signup-inline__input::placeholder { color: #9a9488; }
.inloff-club-hero__form .inloff-signup-inline__input:focus {
  border-color: var(--club-heart);
  box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.4);
}
.inloff-club-hero__form .inloff-signup-inline__submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--club-heart);
  color: #2b2013;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 15px 22px;
  border-radius: 12px;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.inloff-club-hero__form .inloff-signup-inline__submit:hover { background: var(--club-heart-d); }
.inloff-club-hero__form .inloff-signup-inline__submit:active { transform: translateY(1px); }
.inloff-club-hero__form .inloff-signup-inline__msg {
  margin: 12px 0 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

/* ========================= 2. BENEFICIOS ========================= */
.inloff-club-perks { background: var(--club-cream); padding: clamp(64px, 9vw, 108px) 0; }
.inloff-club-perks__head { max-width: 620px; margin: 0 0 clamp(36px, 5vw, 56px); }
.inloff-club-perks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px);
}
.inloff-club-perk { position: relative; padding-top: 22px; border-top: 1px solid var(--club-line); }
.inloff-club-perk--lead { grid-column: 1 / -1; }
.inloff-club-perk--lead .inloff-club-perk__title { font-size: clamp(24px, 3vw, 32px); }
.inloff-club-perk--lead .inloff-club-perk__text { max-width: 60ch; font-size: 17px; }
.inloff-club-perk__num {
  display: block;
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--club-bronze-text);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.inloff-club-perk__title {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--club-navy);
  margin: 0 0 10px;
}
.inloff-club-perk__text { font-size: 15.5px; line-height: 1.6; color: var(--club-ink-soft); margin: 0; }

/* ==================== 3. MANIFESTO (navy) ==================== */
.inloff-club-manifesto {
  background: var(--club-navy);
  color: var(--club-cream);
  padding: clamp(72px, 11vw, 128px) 0;
}
.inloff-club-manifesto__inner { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
.inloff-club-manifesto__quote {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.32;
  font-weight: 500;
  color: #fff;
  margin: 0 0 24px;
  text-wrap: balance;
}
.inloff-club-manifesto__sign {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--club-heart);
  margin: 0;
}

/* ==================== 4. CÓMO FUNCIONA (cream) ==================== */
.inloff-club-how { background: var(--club-cream-warm); padding: clamp(64px, 9vw, 108px) 0; }
.inloff-club-how__steps {
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.inloff-club-how__step { text-align: left; }
.inloff-club-how__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--club-navy);
  color: #fff;
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}
.inloff-club-how__t {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--club-navy);
  margin: 0 0 8px;
}
.inloff-club-how__d { font-size: 15px; line-height: 1.55; color: var(--club-ink-soft); margin: 0; }

/* ==================== 5. RESEÑAS (navy) ==================== */
.inloff-club-reviews { background: var(--club-navy-deep); padding: clamp(64px, 9vw, 108px) 0; }
.inloff-club-reviews__grid {
  margin-top: clamp(36px, 5vw, 52px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
}
.inloff-club-review {
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 26px 24px;
}
.inloff-club-review__stars { color: var(--club-heart); font-size: 14px; letter-spacing: 1px; }
.inloff-club-review blockquote {
  margin: 14px 0 18px;
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: 18px;
  line-height: 1.42;
  color: #fff;
}
.inloff-club-review figcaption { font-size: 13.5px; color: rgba(253, 251, 247, 0.82); font-weight: 600; }
.inloff-club-review figcaption span { color: rgba(253, 251, 247, 0.5); font-weight: 400; }

/* ==================== 6. FAQ (cream) ==================== */
.inloff-club-faq { background: var(--club-cream); padding: clamp(64px, 9vw, 100px) 0; }
.inloff-club-faq .inloff-club__h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.inloff-club-faq__list { margin: 0; }
.inloff-club-faq__item { padding: 22px 0; border-top: 1px solid var(--club-line); }
.inloff-club-faq__item:last-child { border-bottom: 1px solid var(--club-line); }
.inloff-club-faq__item dt {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--club-navy);
  margin-bottom: 8px;
}
.inloff-club-faq__item dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--club-ink-soft); }

/* ==================== 7. CIERRE (navy) ==================== */
.inloff-club-cta {
  background:
    radial-gradient(120% 120% at 20% 110%, rgba(197, 161, 132, 0.18), transparent 55%),
    linear-gradient(200deg, var(--club-navy) 0%, var(--club-navy-deep) 100%);
  color: var(--club-cream);
  padding: clamp(72px, 11vw, 128px) 0;
}
.inloff-club-cta__inner { max-width: 560px; margin: 0 auto; padding: 0 24px; text-align: center; }
.inloff-club-cta__title {
  font-family: var(--inloff-font-serif, 'Playfair Display', serif);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.inloff-club-cta__lead { font-size: 17px; line-height: 1.55; color: rgba(253, 251, 247, 0.86); margin: 0 0 32px; }
.inloff-club-cta__legal { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(253, 251, 247, 0.55); }
.inloff-club-cta__legal a { color: rgba(253, 251, 247, 0.8); text-decoration: underline; text-underline-offset: 2px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 860px) {
  .inloff-club-perks__list { grid-template-columns: 1fr; }
  .inloff-club-how__steps { grid-template-columns: 1fr; gap: 28px; }
  .inloff-club-how__step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
  .inloff-club-how__n { margin-bottom: 0; }
  .inloff-club-how__t { grid-column: 2; }
  .inloff-club-how__d { grid-column: 2; }
  .inloff-club-reviews__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .inloff-club * { transition: none !important; }
}