/* ============================================
   Q2 Shopify Connector — Landing Page
   Autocontenida, pegar en campo "Contenido" del CMS.
   ============================================ */
.q2sc-l { font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #0F1419; line-height: 1.55; max-width: 100%; --navy: #0C447C; }
.q2sc-l * { box-sizing: border-box; }
.q2sc-l h1, .q2sc-l h2, .q2sc-l h3 { font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: #0F1419; margin: 0; }
.q2sc-l p { color: #4A5568; margin: 0; }

/* Wrap interno */
.q2sc-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Sección genérica */
.q2sc-section { padding: 80px 0; }
.q2sc-section--cream { background-color: #f7f5f1; }
.q2sc-section--gray { background-color: #f5f5f5; }

/* Layout 2 columnas */
.q2sc-row { display: flex; align-items: center; gap: 60px; }
.q2sc-row--reverse { flex-direction: row-reverse; }
.q2sc-col { flex: 1; min-width: 0; }

/* Hero */
.q2sc-hero { padding: 60px 0; }
.q2sc-hero h1 { font-size: 52px; line-height: 1.05; margin-bottom: 24px; letter-spacing: -0.03em; }
.q2sc-hero p { font-size: 18px; line-height: 1.6; margin-bottom: 32px; max-width: 480px; }

/* CTA button */
.q2sc-cta { display: inline-block; background: #0C447C; color: #fff; padding: 14px 32px; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 4px; }
.q2sc-cta:hover { background: #082F58; color: #fff; }
.q2sc-cta--link { background: none; color: #555; text-decoration: underline; padding: 14px 0; font-weight: 400; }

/* Sección headlines */
.q2sc-section h2 { font-size: 44px; line-height: 1.1; margin-bottom: 22px; letter-spacing: -0.025em; }
.q2sc-section p.q2sc-lead { font-size: 17px; line-height: 1.7; color: #4A5568; }
.q2sc-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #0C447C; text-transform: uppercase; margin-bottom: 18px; }

/* Imágenes / mockups */
.q2sc-img-frame { width: 100%; aspect-ratio: 4/3; background: #e8e4dc; border-radius: 4px; overflow: hidden; }
.q2sc-img-frame--tall { aspect-ratio: 3/4; }
.q2sc-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.q2sc-img-placeholder { width: 100%; aspect-ratio: 4/3; background: #e8e4dc; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; }
.q2sc-img-placeholder--tall { aspect-ratio: 3/4; }

/* Mockup card (UI flotante) */
.q2sc-mockup { background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); padding: 16px; }
.q2sc-mockup-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #f0f0f0; }
.q2sc-mockup-row:last-child { border-bottom: none; }
.q2sc-mockup-row .thumb { width: 32px; height: 32px; background: #e8e4dc; border-radius: 4px; flex-shrink: 0; }
.q2sc-mockup-row .lines { flex: 1; }
.q2sc-mockup-row .line { height: 6px; background: #ececec; border-radius: 3px; margin-bottom: 5px; }
.q2sc-mockup-row .line:last-child { margin-bottom: 0; width: 65%; }
.q2sc-mockup-row .badge { background: #e9f4ec; color: #2e7d32; font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; }

/* Hero compuesto: foto + mockup flotante */
.q2sc-hero-visual { position: relative; }
.q2sc-hero-visual .q2sc-mockup { position: absolute; left: -40px; bottom: 30px; width: 360px; }

/* Tabs sección 3 (con radio button sin JS) */
.q2sc-tabs { display: flex; gap: 60px; align-items: flex-start; }
.q2sc-tabs-left { flex: 1; }
.q2sc-tabs-right { flex: 1; background: #b8a48a url('/modules/q2shopifyconnect/views/img/landing/two-settings.jpg') center 20% / cover no-repeat; border-radius: 4px; padding: 60px 40px; min-height: 420px; display: flex; align-items: center; justify-content: center; position: relative; }
.q2sc-tab { padding: 18px 0 18px 18px; border-left: 2px solid #e0e0e0; cursor: pointer; }
.q2sc-tab h3 { font-size: 17px; font-weight: 700; color: #0F1419; margin-bottom: 6px; letter-spacing: -0.01em; }
.q2sc-tab p { font-size: 14px; color: #666; line-height: 1.6; }
.q2sc-radio { position: absolute; opacity: 0; pointer-events: none; }
.q2sc-radio:checked + .q2sc-tab { border-left-color: #0C447C; }
.q2sc-radio:checked + .q2sc-tab h3 { color: #0C447C; }
.q2sc-tab-content { display: none; width: 100%; }
#q2sc-r1:checked ~ .q2sc-tabs .q2sc-tabs-right #q2sc-c1,
#q2sc-r2:checked ~ .q2sc-tabs .q2sc-tabs-right #q2sc-c2 { display: block; }

/* Mockups dentro de tabs */
.q2sc-radio-mockup { background: #fff; padding: 20px; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); margin-bottom: 14px; }
.q2sc-radio-mockup-row { display: flex; align-items: center; gap: 14px; }
.q2sc-radio-mockup-row .dot { width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; flex-shrink: 0; }
.q2sc-radio-mockup-row .dot.checked { border-color: #1a1a1a; background: radial-gradient(circle, #1a1a1a 0 6px, transparent 7px); }
.q2sc-radio-mockup-row .label { font-size: 14px; font-weight: 500; }
.q2sc-radio-mockup-row .sub { font-size: 12px; color: #888; margin-top: 4px; }

/* CTA mid-page */
.q2sc-cta-mid { text-align: center; padding: 100px 0; }
.q2sc-cta-mid h2 { font-size: 48px; margin-bottom: 32px; letter-spacing: -0.025em; }

/* How it works */
.q2sc-howitworks h2 { font-size: 40px; margin-bottom: 40px; letter-spacing: -0.025em; }
.q2sc-steps { display: flex; gap: 40px; }
.q2sc-step { flex: 1; }
.q2sc-step .step-num { font-size: 14px; font-weight: 700; color: #0C447C; margin-bottom: 6px; letter-spacing: 0.5px; }
.q2sc-step .step-title { font-size: 16px; font-weight: 700; color: #0F1419; margin-bottom: 10px; }
.q2sc-step p { font-size: 14px; color: #4A5568; line-height: 1.6; }

/* FAQ — V4 style (all open, 2-column grid, numbered) */
.q2sc-faq { padding: 90px 0; }
.q2sc-faq .faq-header { margin-bottom: 50px; }
.q2sc-faq .faq-header h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(48px, 5.5vw, 88px); line-height: 1; letter-spacing: -0.01em; }
.q2sc-faq .faq-columns { columns: 2; column-gap: 70px; }
.q2sc-faq .q { break-inside: avoid; margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid #cdc6b8; }
.q2sc-faq .q .num { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 30px; color: #0C447C; margin-bottom: 12px; line-height: 1; }
.q2sc-faq .q h3 { font-size: 16px; line-height: 1.35; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.01em; }
.q2sc-faq .q p { font-size: 14px; line-height: 1.7; color: #4A5568; }

/* Responsive */
@media (max-width: 768px) {
  .q2sc-section { padding: 50px 0; }
  .q2sc-hero h1 { font-size: 34px; }
  .q2sc-section h2 { font-size: 32px; }
  .q2sc-cta-mid h2 { font-size: 32px; }
  .q2sc-howitworks h2 { font-size: 30px; }
  .q2sc-faq .faq-header h2 { font-size: 44px; }
  .q2sc-faq .faq-columns { columns: 1; }
  .q2sc-row, .q2sc-tabs, .q2sc-steps { flex-direction: column; gap: 40px; }
  .q2sc-row--reverse { flex-direction: column; }
  .q2sc-hero-visual .q2sc-mockup { position: static; width: 100%; margin-top: -40px; }
}

/* ============================================
   OVERRIDES anti-theme — el theme del shop USA aplica
   text-align:center y text-decoration:underline al
   contenido CMS. Forzamos con !important.
   ============================================ */
.q2sc-l, .q2sc-l p, .q2sc-l div, .q2sc-l h1, .q2sc-l h2, .q2sc-l h3, .q2sc-l h4 { text-align: left !important; }
.q2sc-l a { text-decoration: none !important; }
.q2sc-l a:hover { text-decoration: none !important; }
.q2sc-cta { text-decoration: none !important; color: #fff !important; }
.q2sc-cta:hover { color: #fff !important; }
.q2sc-hero h1, .q2sc-section h2, .q2sc-howitworks h2, .q2sc-faq .faq-header h2, .q2sc-cta-mid h2 { font-weight: 700 !important; }
.q2sc-tab h3, .q2sc-faq .q h3, .q2sc-step .step-title { font-weight: 700 !important; }
/* Centrados específicos */
.q2sc-cta-mid, .q2sc-cta-mid h2, .q2sc-cta-mid div { text-align: center !important; }

/* Even more specific to beat theme body#cms rules */
body#cms .q2sc-l,
body#cms .q2sc-l p,
body#cms .q2sc-l div,
body#cms .q2sc-l h1,
body#cms .q2sc-l h2,
body#cms .q2sc-l h3,
body#cms .q2sc-l h4 { text-align: left !important; }
body#cms .q2sc-l a,
body#cms .q2sc-l a:hover,
body#cms .q2sc-l a:focus { text-decoration: none !important; }
body#cms .q2sc-cta,
body#cms .q2sc-cta:hover { background: #0C447C !important; color: #fff !important; text-decoration: none !important; }
body#cms .q2sc-l .q2sc-cta-mid,
body#cms .q2sc-l .q2sc-cta-mid h2 { text-align: center !important; }
body#cms .q2sc-l .q2sc-hero h1,
body#cms .q2sc-l .q2sc-section h2,
body#cms .q2sc-l .q2sc-howitworks h2,
body#cms .q2sc-l .q2sc-cta-mid h2 { font-weight: 700 !important; font-family: 'Inter', sans-serif !important; }

/* Override global.css h1/h2/h3 sizes */
body#cms .q2sc-l .q2sc-hero h1 { font-size: 52px !important; line-height: 1.05 !important; margin-bottom: 24px !important; padding-bottom: 0 !important; letter-spacing: -0.03em !important; }
body#cms .q2sc-l .q2sc-section h2 { font-size: 44px !important; line-height: 1.1 !important; margin-bottom: 22px !important; padding-bottom: 0 !important; letter-spacing: -0.025em !important; }
body#cms .q2sc-l .q2sc-howitworks h2 { font-size: 40px !important; line-height: 1.1 !important; padding-bottom: 0 !important; }
body#cms .q2sc-l .q2sc-cta-mid h2 { font-size: 48px !important; line-height: 1.1 !important; padding-bottom: 0 !important; }
body#cms .q2sc-l .q2sc-faq .faq-header h2 { font-size: clamp(48px, 5.5vw, 88px) !important; padding-bottom: 0 !important; line-height: 1 !important; font-family: 'Playfair Display', Georgia, serif !important; font-weight: 400 !important; }
body#cms .q2sc-l .q2sc-tab h3 { font-size: 17px !important; padding-bottom: 0 !important; }
body#cms .q2sc-l .q2sc-step .step-num { font-size: 14px !important; }
body#cms .q2sc-l .q2sc-faq .q h3 { font-size: 16px !important; padding-bottom: 0 !important; }

/* Tabs Two settings — más grandes */
body#cms .q2sc-l .q2sc-tab h3 { font-size: 22px !important; line-height: 1.2 !important; margin-bottom: 10px !important; }
body#cms .q2sc-l .q2sc-tab p { font-size: 16px !important; line-height: 1.6 !important; }

/* CTA mid — botón centrado */
body#cms .q2sc-cta-mid .q2sc-wrap { text-align: center !important; }
body#cms .q2sc-cta-mid .q2sc-cta { display: inline-block !important; margin: 0 auto !important; }

/* Full-bleed para secciones con fondo crema/gris (escape del max-width del cms wrapper) */
body#cms .q2sc-l .q2sc-section--cream,
body#cms .q2sc-l .q2sc-cta-mid {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  position: relative;
  left: 0;
}

/* Tabs más grandes — v5 */
body#cms .q2sc-l .q2sc-tab h3 { font-size: 26px !important; line-height: 1.15 !important; margin-bottom: 12px !important; font-weight: 700 !important; }
body#cms .q2sc-l .q2sc-tab p { font-size: 17px !important; line-height: 1.6 !important; color: #4A5568 !important; }
body#cms .q2sc-l .q2sc-tab { padding: 22px 0 22px 22px !important; }

/* Targets h3 sueltos en sección Two settings (TinyMCE quitó wrapper q2sc-tab) */
body#cms .q2sc-l .q2sc-lead + h3,
body#cms .q2sc-l .q2sc-lead ~ h3,
body#cms .q2sc-l h3:not(.no-override) { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 12px !important; font-weight: 700 !important; }
body#cms .q2sc-l .q2sc-lead ~ p,
body#cms .q2sc-l h3 + p { font-size: 17px !important; line-height: 1.6 !important; color: #4A5568 !important; margin-bottom: 24px !important; }
/* Excepciones (FAQ h3 que sí debe ser pequeño) */
body#cms .q2sc-l .q2sc-faq .q h3 { font-size: 16px !important; margin-bottom: 10px !important; }
body#cms .q2sc-l .q2sc-step h3,
body#cms .q2sc-l .q2sc-step .step-title { font-size: 16px !important; margin-bottom: 10px !important; }

/* Target h3/p dentro de q2sc-tabs-left (la estructura sí existe) */
body#cms .q2sc-l .q2sc-tabs-left h3 { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 12px !important; margin-top: 20px !important; font-weight: 700 !important; padding-bottom: 0 !important; }
body#cms .q2sc-l .q2sc-tabs-left p { font-size: 17px !important; line-height: 1.6 !important; color: #4A5568 !important; margin-bottom: 24px !important; }
body#cms .q2sc-l .q2sc-tabs-left .q2sc-lead { font-size: 17px !important; }

/* Reducir padding-bottom del último bloque para pegar al footer */
body#cms .q2sc-l .q2sc-faq { padding-bottom: 40px !important; }
body#cms .q2sc-l { margin-bottom: 0 !important; }
body#cms #center_column { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ============================================
   FIX RESPONSIVE MÓVIL — los overrides body#cms con !important
   pisaban las media queries. Re-forzamos en móvil.
   ============================================ */
@media (max-width: 768px) {
  body#cms .q2sc-l .q2sc-hero h1 { font-size: 32px !important; line-height: 1.1 !important; }
  body#cms .q2sc-l .q2sc-section h2 { font-size: 28px !important; }
  body#cms .q2sc-l .q2sc-howitworks h2 { font-size: 26px !important; }
  body#cms .q2sc-l .q2sc-cta-mid h2 { font-size: 28px !important; }
  body#cms .q2sc-l .q2sc-faq .faq-header h2 { font-size: 40px !important; }
  body#cms .q2sc-l .q2sc-tabs-left h3,
  body#cms .q2sc-l .q2sc-tab h3 { font-size: 20px !important; }
  /* Apilar columnas */
  body#cms .q2sc-l .q2sc-row,
  body#cms .q2sc-l .q2sc-tabs,
  body#cms .q2sc-l .q2sc-steps { display: block !important; }
  body#cms .q2sc-l .q2sc-col { width: 100% !important; margin-bottom: 30px !important; }
  /* Resetear mockups absolutos para que no se monten */
  body#cms .q2sc-l .q2sc-mockup { position: static !important; width: 100% !important; right: auto !important; left: auto !important; bottom: auto !important; top: auto !important; margin-top: 16px !important; }
  /* Cards overlay de Two settings -> estáticas en móvil */
  body#cms .q2sc-l .q2sc-row .q2sc-col > div[style*="position:relative"] > div[style*="position:absolute"] { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin-top: 16px !important; }
  /* FAQ una columna */
  body#cms .q2sc-l .q2sc-faq .faq-columns { columns: 1 !important; }
  /* Asegurar padding lateral y no desbordar */
  body#cms .q2sc-l .q2sc-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  body#cms .q2sc-l { overflow-x: hidden !important; }
  body#cms .q2sc-l img { max-width: 100% !important; height: auto !important; }
  /* El logo Q2 es un <img> inline dentro del h1 (height:1.15em). La regla
     img{height:auto} de arriba lo agrandaba a tamaño natural. Restaurar. */
  body#cms .q2sc-l .q2sc-hero h1 img {
    height: 1.15em !important;
    width: auto !important;
    max-width: none !important;
    vertical-align: -0.22em !important;
    display: inline-block !important;
  }
  /* Neutralizar full-bleed en móvil: el overflow-x:hidden de arriba recortaba
     el desbordamiento izquierdo del truco 100vw y cortaba el texto crema.
     En móvil las secciones usan el ancho normal del contenedor. */
  body#cms .q2sc-l .q2sc-section--cream,
  body#cms .q2sc-l .q2sc-cta-mid {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
  }
}