/* ============================================================
   Dushi v3 — Opción 3 "Glass / Gradient"
   Concepto: SaaS moderno premiado (Stripe · Linear · Vercel · Framer).
   Fondo claro frío con gradientes suaves, tarjetas de vidrio
   (backdrop-filter), tipografía geométrica Space Grotesk, botones
   con gradiente rojo→violeta. Mismo contenido que Opción 1 y 2.
   Aplica solo cuando <body> tiene la clase "op3".
   ============================================================ */

body.op3 {
  --o3-bg: #F5F6FB;
  --o3-ink: #101223;
  --o3-muted: #5A5F78;
  --o3-line: rgba(16, 18, 35, .08);
  --o3-red: #E0463C;
  --o3-violet: #6D4AFF;
  --o3-blue: #2E7CF6;
  --o3-glass: rgba(255, 255, 255, .72);
  background: var(--o3-bg);
  color: var(--o3-ink);
}

/* ---------- Tipografía ---------- */
body.op3 h1,
body.op3 h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
body.op3 h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--o3-red), var(--o3-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.op3 .q-price,
body.op3 .q-folio,
body.op3 .step-num,
body.op3 .pur-num,
body.op3 .seal-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* ---------- Utilidades ---------- */
body.op3 .eyebrow {
  display: inline-block; background: #FDE8E5; color: #C4342B;
  padding: 6px 12px; border-radius: 999px; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}
body.op3 .section-head-v3 h2,
body.op3 .quote-head h2,
body.op3 .why-v3 h2 { color: var(--o3-ink); }
body.op3 .section-head-v3 p,
body.op3 .quote-head p { color: var(--o3-muted); }

body.op3 .btn-v3 { border-radius: 999px; }
body.op3 .btn-v3-primary {
  background: linear-gradient(135deg, var(--o3-red), var(--o3-violet));
  box-shadow: 0 10px 26px rgba(109, 74, 255, .28);
}
body.op3 .btn-v3-primary:hover { box-shadow: 0 14px 32px rgba(109, 74, 255, .36); }
body.op3 .btn-v3-secondary { background: #fff; color: var(--o3-ink); border-color: var(--o3-ink); }
body.op3 .btn-v3-ghost { color: var(--o3-ink); border-color: var(--o3-ink); }

/* ---------- Hero ---------- */
body.op3 .hero-v3 {
  background:
    radial-gradient(640px 320px at 12% 8%, rgba(224, 70, 60, .16), transparent 60%),
    radial-gradient(640px 360px at 88% 18%, rgba(109, 74, 255, .16), transparent 60%),
    radial-gradient(520px 300px at 50% 105%, rgba(46, 124, 246, .10), transparent 60%),
    var(--o3-bg);
  border-bottom: none;
}
body.op3 .lead-v3 { color: var(--o3-muted); }
body.op3 .lead-v3 strong { color: var(--o3-ink); }
body.op3 .hero-v3-trust { color: var(--o3-muted); }
body.op3 .hero-v3-trust strong { color: var(--o3-ink); }

body.op3 .price-card {
  background: var(--o3-glass); backdrop-filter: blur(10px);
  border: 1px solid var(--o3-line); border-radius: 16px;
  box-shadow: 0 12px 34px rgba(16, 18, 35, .08);
}
body.op3 .price-card-accent { border-color: var(--o3-red); box-shadow: inset 3px 0 0 var(--o3-red), 0 12px 34px rgba(224,70,60,.12); }
body.op3 .price-tag { color: var(--o3-red); }
body.op3 .price-value { color: var(--o3-ink); }
body.op3 .price-value span { color: var(--o3-muted); }

body.op3 .hero-v3-photo img { border-radius: 20px; box-shadow: 0 30px 80px rgba(16,18,35,.24); }
body.op3 .hero-v3-reviewcard {
  background: var(--o3-glass); backdrop-filter: blur(10px);
  border-radius: 16px; border-left: 3px solid var(--o3-red);
}
body.op3 .hero-v3-reviewcard p { color: var(--o3-muted); }
body.op3 .hero-v3-reviewcard .review-author { color: var(--o3-muted); }
body.op3 .hero-v3-seal {
  background: linear-gradient(150deg, #101223, #241B4D); color: #fff;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
}
body.op3 .hero-v3-seal strong { color: #fff; }
body.op3 .seal-mark { color: #B9A8FF; }
body.op3 .hero-v3-stamp { background: linear-gradient(135deg, var(--o3-red), var(--o3-violet)); }

/* ---------- Franja de confianza ---------- */
body.op3 .trust-rail { background: rgba(255,255,255,.6); backdrop-filter: blur(10px); border-bottom: 1px solid var(--o3-line); }
body.op3 .tr-item { color: var(--o3-muted); }
body.op3 .tr-item strong { color: var(--o3-ink); }
body.op3 .tr-item svg { color: var(--o3-violet); }

/* ---------- Cotizador ---------- */
body.op3 .quote-section { background: linear-gradient(180deg, #F5F6FB, #EEEFF7); }
body.op3 .quoter {
  background: #fff; border: 1px solid var(--o3-line); border-radius: 20px;
  border-top: none; box-shadow: 0 24px 60px rgba(16,18,35,.10);
  position: relative;
}
body.op3 .quoter::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--o3-red), var(--o3-violet), var(--o3-blue));
}
body.op3 .q-title, body.op3 .q-sub { color: var(--o3-ink); }
body.op3 .q-product { background: #fff; border-color: var(--o3-line); color: var(--o3-ink); border-radius: 14px; }
body.op3 .q-product .ico { background: #F0F1F7; color: var(--o3-ink); border-radius: 12px; }
body.op3 .q-product:hover { border-color: var(--o3-violet); }
body.op3 .q-product.selected { border-color: var(--o3-violet); background: #F5F3FF; box-shadow: 0 0 0 2px var(--o3-violet); }
body.op3 .q-product.selected .ico { background: linear-gradient(135deg, var(--o3-red), var(--o3-violet)); color: #fff; }
body.op3 .q-field label { color: var(--o3-muted); }
body.op3 .q-field select, body.op3 .q-field input { border-color: var(--o3-line); border-radius: 10px; }
body.op3 .q-field select:focus, body.op3 .q-field input:focus { outline-color: var(--o3-violet); border-color: var(--o3-violet); }
body.op3 .q-back { color: var(--o3-muted); }
body.op3 .q-back:hover { color: var(--o3-ink); }
body.op3 .q-price { color: var(--o3-red); }
body.op3 .q-unit, body.op3 .q-note { color: var(--o3-muted); }
body.op3 .q-note strong { color: var(--o3-ink); }
body.op3 .q-specs { background: #F6F7FB; border-color: var(--o3-line); border-radius: 14px; }
body.op3 .q-specs-label { color: var(--o3-violet); }
body.op3 .q-specs li { color: var(--o3-muted); }
body.op3 .q-folio-box { background: #F5F3FF; border-color: var(--o3-violet); border-radius: 14px; }
body.op3 .q-folio { color: var(--o3-violet); }
body.op3 .q-ship-quick-btn { background: #fff; border-color: var(--o3-line); border-radius: 14px; }
body.op3 .q-ship-quick-btn:hover { border-color: var(--o3-violet); }
body.op3 .q-ship-quick-btn strong { color: var(--o3-ink); }
body.op3 .q-ship-quick-btn small { color: var(--o3-muted); }
body.op3 .q-ship-quick-btn .qsq-ico { background: #F0F1F7; color: var(--o3-violet); }
body.op3 .q-ship-or { color: var(--o3-muted); }

body.op3 .quote-aside {
  background: linear-gradient(160deg, #101223, #241B4D);
  color: rgba(255,255,255,.82); border-radius: 20px;
}
body.op3 .quote-aside h3 { color: #fff; }
body.op3 .quote-aside li::before { color: #B9A8FF; }
body.op3 .quote-aside li strong { color: #fff; }
body.op3 .aside-sep { background: rgba(255,255,255,.14); }
body.op3 .aside-note { border-top-color: rgba(255,255,255,.14); }
body.op3 .aside-note p { color: rgba(255,255,255,.86); }
body.op3 .aside-note .review-author { color: rgba(255,255,255,.6); }

/* ---------- Servicios ---------- */
body.op3 .services-v3 { background: var(--o3-bg); }
body.op3 .card-v3 {
  background: #fff; border: 1px solid var(--o3-line); border-radius: 18px;
  box-shadow: 0 8px 30px rgba(16,18,35,.06);
}
body.op3 .card-v3:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(16,18,35,.14); }
body.op3 .card-v3-media img { border-radius: 18px 18px 0 0; }
body.op3 .card-v3-body h3 { color: var(--o3-ink); }
body.op3 .card-v3-body p, body.op3 .card-v3-body ul { color: var(--o3-muted); }
body.op3 .card-v3-body ul li::before { color: var(--o3-violet); }
body.op3 .card-v3-price { color: var(--o3-muted); border-top-color: var(--o3-line); }
body.op3 .card-v3-price strong { color: var(--o3-red); }
body.op3 .card-v3-link { color: var(--o3-ink); }
body.op3 .card-v3-link:hover { color: var(--o3-violet); }
body.op3 .chip-pur { background: linear-gradient(135deg, var(--o3-red), var(--o3-violet)); border-radius: 999px; }

/* ---------- Franja PUR ---------- */
body.op3 .pur-band {
  background: linear-gradient(135deg, #101223, #1A1740);
  color: #fff;
}
body.op3 .pur-band-copy h2 { color: #fff; }
body.op3 .pur-band-copy p { color: rgba(255,255,255,.82); }
body.op3 .pur-band-copy p strong { color: #fff; }
body.op3 .pur-band-copy .eyebrow { background: rgba(255,255,255,.12); color: #D8CCFF; }
body.op3 .pur-band-stats { background: rgba(255,255,255,.08); border-radius: 16px; }
body.op3 .pur-stat { background: rgba(255,255,255,.04); }
body.op3 .pur-num {
  background: linear-gradient(90deg, #FF9A8C, #B9A8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.op3 .pur-stat > span:last-child { color: rgba(255,255,255,.82); }

/* ---------- Reseñas ---------- */
body.op3 .reviews-v3 { background: var(--o3-bg); }
body.op3 .review-v3 { background: #fff; border: 1px solid var(--o3-line); border-radius: 16px; box-shadow: 0 8px 28px rgba(16,18,35,.06); }
body.op3 .review-v3 p { color: var(--o3-muted); }
body.op3 .review-v3 footer strong { color: var(--o3-ink); }
body.op3 .review-v3 footer a { color: var(--o3-violet); }
body.op3 .reviews-prev, body.op3 .reviews-next { background: #fff; color: var(--o3-ink); border-color: var(--o3-ink); }
body.op3 .reviews-prev:hover, body.op3 .reviews-next:hover { background: var(--o3-violet); border-color: var(--o3-violet); color: #fff; }

/* ---------- Por qué Dushi ---------- */
body.op3 .why-v3 { background: #fff; border-color: var(--o3-line); }
body.op3 .why-lead { color: var(--o3-muted); }
body.op3 .why-lead strong { color: var(--o3-ink); }
body.op3 .check-list-v3 li { color: var(--o3-muted); }
body.op3 .check-list-v3 li strong { color: var(--o3-ink); }
body.op3 .check-list-v3 .tick { color: var(--o3-violet); }
body.op3 .why-v3-media img { border-radius: 18px; }

/* ---------- Sin riesgo ---------- */
body.op3 .risk-v3 { background: linear-gradient(180deg, #F5F6FB, #EEEFF7); }
body.op3 .risk-card-v3 { background: #fff; border: 1px solid var(--o3-line); border-radius: 16px; }
body.op3 .risk-card-v3 h3 { color: var(--o3-ink); }
body.op3 .risk-card-v3 p { color: var(--o3-muted); }
body.op3 .risk-ico { background: #F0F1F7; color: var(--o3-violet); }
body.op3 .risk-featured { border-color: var(--o3-violet); }
body.op3 .risk-featured .risk-ico { background: linear-gradient(135deg, var(--o3-red), var(--o3-violet)); color: #fff; }

/* ---------- Proceso ---------- */
body.op3 .process-v3 { background: var(--o3-bg); }
body.op3 .step-v3 h3 { color: var(--o3-ink); }
body.op3 .step-v3 p { color: var(--o3-muted); }
body.op3 .step-v3 .step-num {
  background: linear-gradient(90deg, var(--o3-red), var(--o3-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.op3 .video-facade-v3 { border-radius: 18px; }
body.op3 .play-v3::after { border-left-color: var(--o3-violet); }

/* ---------- Papeles ---------- */
body.op3 .papers-v3 { background: #fff; border-color: var(--o3-line); }
body.op3 .paper-card { background: #F6F7FB; border: 1px solid var(--o3-line); border-radius: 16px; }
body.op3 .paper-card h3 { color: var(--o3-ink); }
body.op3 .paper-card p { color: var(--o3-muted); }
body.op3 .paper-card p strong { color: var(--o3-ink); }

/* ---------- FAQ ---------- */
body.op3 .faq-v3 { background: linear-gradient(180deg, #F5F6FB, #EEEFF7); }
body.op3 .faq-item { background: #fff; border: 1px solid var(--o3-line); border-radius: 14px; }
body.op3 .faq-item summary { color: var(--o3-ink); }
body.op3 .faq-item summary::after { color: var(--o3-violet); }
body.op3 .faq-item .answer { color: var(--o3-muted); }
body.op3 .faq-item .answer strong { color: var(--o3-ink); }

/* ---------- Logística ---------- */
body.op3 .logi-v3 { background: var(--o3-bg); }
body.op3 .logi-card-v3 { background: #fff; border: 1px solid var(--o3-line); border-radius: 16px; box-shadow: 0 8px 28px rgba(16,18,35,.06); }
body.op3 .logi-card-v3 h3 { color: var(--o3-ink); }
body.op3 .logi-card-v3 p { color: var(--o3-muted); }
body.op3 .logi-card-v3 p strong { color: var(--o3-ink); }

/* ---------- CTA final ---------- */
body.op3 .final-cta {
  background: linear-gradient(120deg, var(--o3-red), var(--o3-violet) 55%, var(--o3-blue));
  color: #fff;
}
body.op3 .final-cta h2 { color: #fff; }
body.op3 .final-cta > div > p { color: rgba(255,255,255,.92); }
body.op3 .final-cta-contact { border-left-color: rgba(255,255,255,.3); }
body.op3 .final-cta-contact p { color: rgba(255,255,255,.92); }
body.op3 .final-cta-contact a { color: #fff; }
body.op3 .final-note { color: rgba(255,255,255,.65) !important; }
body.op3 .btn-v3-light { background: #fff; color: var(--o3-ink); }
body.op3 .btn-v3-outline { color: #fff; border-color: rgba(255,255,255,.6); }
body.op3 .btn-v3-outline:hover { border-color: #fff; }