/* wp-content/themes/flowsop/assets/css/landing.css — Landing FlowSop neo-brutal (depends on tokens.css + components.css + grid.css) */

/* ── Wrapper general ── */
.landing { background: var(--color-bg); }
.landing__section { padding: var(--space-12) var(--space-6); border-bottom: 4px solid var(--color-ink); position: relative; }
.landing__section:last-of-type { border-bottom: none; }
.landing__inner { max-width: var(--max-width); margin: 0 auto; }
.landing__eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--color-ink); color: var(--color-bg); border: 3px solid var(--color-ink); padding: 4px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; transform: rotate(-1deg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); }
.landing__title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 var(--space-4); }
.landing__title .text-stroke { -webkit-text-stroke: 2px var(--color-ink); color: transparent; }
.landing__lede { font-size: 16px; line-height: 1.5; opacity: .75; max-width: 640px; margin: 0 0 var(--space-8); }
.landing__grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.landing__grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }

/* ── 01 HERO ── */
.landing-hero { background-color: var(--color-bg); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; padding: var(--space-12) var(--space-6) var(--space-16); border-bottom: 4px solid var(--color-ink); overflow: hidden; }
.landing-hero__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
.landing-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--color-ink); color: var(--color-bg); border: 3px solid var(--color-ink); padding: 6px 12px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; transform: rotate(-1deg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); }
.landing-hero__title { font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; margin: 0 0 var(--space-4); }
.landing-hero__title .text-stroke { -webkit-text-stroke: 2.5px var(--color-ink); color: transparent; }
.landing-hero__title .chip-yellow { background: var(--color-secondary); border: 4px solid var(--color-ink); padding: 2px 12px; display: inline-block; transform: rotate(1deg); box-shadow: var(--shadow-sm); line-height: 1; }
.landing-hero__title .chip-accent { background: var(--color-accent); border: 4px solid var(--color-ink); padding: 2px 12px; display: inline-block; transform: rotate(-1deg); box-shadow: var(--shadow-sm); line-height: 1; }
.landing-hero__sub { font-size: 18px; line-height: 1.5; opacity: .8; margin: 0 0 var(--space-6); max-width: 560px; }
.landing-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
.landing-hero__meta span { display: inline-flex; align-items: center; gap: 6px; border: 3px solid var(--color-ink); background: var(--color-bg); padding: 6px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; box-shadow: var(--shadow-sm); }
.landing-hero__meta span:nth-child(1) { transform: rotate(-0.6deg); }
.landing-hero__meta span:nth-child(2) { transform: rotate(0.5deg); background: var(--color-secondary); }
.landing-hero__meta span:nth-child(3) { transform: rotate(-0.3deg); background: var(--color-muted); }
.landing-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--space-4); }
.landing-hero__ctas .btn { font-size: 14px; padding: 16px 24px; }
.landing-hero__proof { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .6; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.landing-hero__proof i { font-style: normal; width: 6px; height: 6px; background: var(--color-ink); border-radius: 50%; display: inline-block; }

/* Mockup cápsula */
.landing-hero__mockup { position: relative; display: flex; justify-content: center; align-items: center; }
.landing-hero__card { background: var(--color-bg); border: 4px solid var(--color-ink); box-shadow: var(--shadow-lg); padding: var(--space-6); width: 100%; max-width: 380px; transform: rotate(0.8deg); position: relative; }
.landing-hero__card-badge { position: absolute; top: -12px; right: -10px; background: var(--color-secondary); border: 3px solid var(--color-ink); padding: 4px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transform: rotate(2deg); box-shadow: 3px 3px 0 0 var(--color-ink); }
.landing-hero__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.landing-hero__card-icon { width: 44px; height: 44px; background: var(--color-accent); border: 3px solid var(--color-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; box-shadow: var(--shadow-sm); transform: rotate(-2deg); }
.landing-hero__card-title { font-weight: 900; text-transform: uppercase; font-size: 15px; line-height: 1.1; margin: 0; }
.landing-hero__card-title small { display: block; font-weight: 700; font-size: 10px; letter-spacing: .08em; opacity: .6; margin-top: 2px; }
.landing-hero__steps { display: flex; flex-direction: column; gap: 8px; margin: var(--space-4) 0; }
.landing-hero__step { display: flex; align-items: center; gap: 10px; border: 3px solid var(--color-ink); padding: 10px 12px; background: var(--color-bg); font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: var(--shadow-sm); }
.landing-hero__step.is-done { background: var(--color-secondary); text-decoration: line-through; text-decoration-thickness: 2px; }
.landing-hero__step-box { width: 20px; height: 20px; border: 3px solid var(--color-ink); background: var(--color-bg); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; box-shadow: 2px 2px 0 0 var(--color-ink); }
.landing-hero__step.is-done .landing-hero__step-box { background: var(--color-ink); color: var(--color-bg); }
.landing-hero__step.is-done .landing-hero__step-box::after { content: "✓"; }
.landing-hero__progress { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4); }
.landing-hero__progress-bar { flex: 1; height: 16px; border: 3px solid var(--color-ink); background: var(--color-bg); box-shadow: var(--shadow-sm); overflow: hidden; }
.landing-hero__progress-fill { height: 100%; width: 66%; background: repeating-linear-gradient(45deg, var(--color-secondary) 0 8px, var(--color-accent) 8px 16px); }
.landing-hero__progress-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: var(--color-ink); color: var(--color-bg); padding: 4px 8px; border: 3px solid var(--color-ink); }

/* ── 03 DOLOR ── */
.landing-dolor { background: var(--color-ink); color: var(--color-bg); }
.landing-dolor .landing__title { color: var(--color-bg); }
.landing-dolor .landing__title .text-stroke { -webkit-text-stroke: 2px var(--color-bg); color: transparent; }
.landing-dolor .landing__lede { color: var(--color-bg); opacity: .7; }
.landing-dolor__card { background: var(--color-bg); color: var(--color-ink); border: 4px solid var(--color-ink); box-shadow: 6px 6px 0 0 var(--color-accent); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.landing-dolor__card:nth-child(1) { transform: rotate(-0.5deg); }
.landing-dolor__card:nth-child(2) { transform: rotate(0.6deg); background: var(--color-secondary); }
.landing-dolor__card:nth-child(3) { transform: rotate(-0.3deg); background: var(--color-muted); }
.landing-dolor__icon { width: 44px; height: 44px; border: 3px solid var(--color-ink); background: var(--color-ink); color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; box-shadow: var(--shadow-sm); }
.landing-dolor__card:nth-child(2) .landing-dolor__icon { background: var(--color-bg); color: var(--color-ink); }
.landing-dolor__card h3 { font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 1.1; margin: 0; }
.landing-dolor__card p { font-size: 13px; line-height: 1.5; opacity: .75; margin: 0; }
.landing-dolor__vs { margin-top: var(--space-8); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; border: 4px dashed rgba(255,253,245,0.3); padding: var(--space-6); }
.landing-dolor__vs-col h4 { font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; margin: 0 0 var(--space-3); }
.landing-dolor__vs-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.landing-dolor__vs-col li { font-size: 13px; font-weight: 700; display: flex; gap: 6px; }
.landing-dolor__vs-col--bad li::before { content: "✗"; color: var(--color-accent); font-weight: 900; }
.landing-dolor__vs-col--good li::before { content: "✓"; color: var(--color-secondary); font-weight: 900; }
.landing-dolor__vs-sep { font-weight: 900; font-size: 20px; background: var(--color-secondary); color: var(--color-ink); border: 3px solid var(--color-bg); width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(3deg); box-shadow: 3px 3px 0 0 var(--color-accent); }

/* ── 04 ANATOMIA ── */
.landing-anatomia__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.landing-anatomia__item { background: var(--color-bg); border: 4px solid var(--color-ink); box-shadow: var(--shadow-md); padding: var(--space-6); position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.landing-anatomia__item:nth-child(1) { transform: rotate(-0.4deg); }
.landing-anatomia__item:nth-child(2) { transform: rotate(0.4deg); }
.landing-anatomia__item:nth-child(3) { transform: rotate(-0.2deg); }
.landing-anatomia__item:nth-child(4) { transform: rotate(0.3deg); }
.landing-anatomia__item:nth-child(5) { transform: rotate(-0.5deg); }
.landing-anatomia__item:nth-child(6) { transform: rotate(0.2deg); }
.landing-anatomia__num { font-weight: 900; font-size: 36px; line-height: 1; -webkit-text-stroke: 2px var(--color-ink); color: transparent; }
.landing-anatomia__item h3 { font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: -0.02em; margin: 0; }
.landing-anatomia__item p { font-size: 13px; line-height: 1.5; opacity: .7; margin: 0; flex: 1; }
.landing-anatomia__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.landing-anatomia__meta span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border: 2px solid var(--color-ink); padding: 3px 6px; background: var(--color-bg); }
.landing-anatomia__meta span.is-yellow { background: var(--color-secondary); }
.landing-anatomia__meta span.is-violet { background: var(--color-muted); }

/* ── 05 PILARES ── */
.landing-pilares { background: var(--color-bg); }
.landing-pilares__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-4); }
.landing-pilar { border: 4px solid var(--color-ink); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); position: relative; min-height: 280px; }
.landing-pilar:nth-child(1) { background: var(--color-accent); transform: rotate(-0.4deg); }
.landing-pilar:nth-child(2) { background: var(--color-secondary); transform: rotate(0.3deg); }
.landing-pilar:nth-child(3) { background: var(--color-muted); transform: rotate(-0.2deg); }
.landing-pilar:nth-child(4) { background: var(--color-ink); color: var(--color-bg); transform: rotate(0.5deg); }
.landing-pilar:nth-child(4) .landing-pilar__num { -webkit-text-stroke: 1.5px var(--color-bg); }
.landing-pilar:nth-child(5) { background: var(--color-bg); transform: rotate(-0.3deg); }
.landing-pilar__num { font-weight: 900; font-size: 42px; line-height: 1; -webkit-text-stroke: 2px var(--color-ink); color: transparent; }
.landing-pilar h3 { font-weight: 900; text-transform: uppercase; font-size: 15px; letter-spacing: -0.02em; margin: 0; }
.landing-pilar p { font-size: 12px; line-height: 1.5; opacity: .8; margin: 0; flex: 1; }
.landing-pilar__example { font-size: 11px; font-weight: 700; border-top: 3px solid var(--color-ink); padding-top: var(--space-3); margin-top: auto; }
.landing-pilar:nth-child(4) .landing-pilar__example { border-color: var(--color-bg); }
.landing-pilar__example strong { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; margin-bottom: 4px; }

/* ── 06 COMO FUNCIONA ── */
.landing-pasos { background: var(--color-secondary); }
.landing-pasos__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); align-items: start; }
.landing-paso { background: var(--color-bg); border: 4px solid var(--color-ink); box-shadow: var(--shadow-md); padding: var(--space-6); position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.landing-paso:nth-child(1) { transform: rotate(-0.5deg); }
.landing-paso:nth-child(2) { transform: rotate(0.4deg); }
.landing-paso:nth-child(3) { transform: rotate(-0.3deg); }
.landing-paso__num { position: absolute; top: -14px; left: 16px; background: var(--color-ink); color: var(--color-bg); border: 3px solid var(--color-ink); padding: 4px 10px; font-weight: 900; font-size: 11px; letter-spacing: .08em; transform: rotate(-1deg); box-shadow: var(--shadow-sm); }
.landing-paso__icon { width: 48px; height: 48px; border: 3px solid var(--color-ink); background: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; box-shadow: var(--shadow-sm); transform: rotate(-2deg); }
.landing-paso:nth-child(2) .landing-paso__icon { background: var(--color-muted); }
.landing-paso:nth-child(3) .landing-paso__icon { background: var(--color-secondary); }
.landing-paso h3 { font-weight: 900; text-transform: uppercase; font-size: 16px; margin: 0; }
.landing-paso p { font-size: 13px; line-height: 1.5; opacity: .75; margin: 0; }
.landing-paso__arrow { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; color: var(--color-ink); }
.landing-pasos__note { margin-top: var(--space-8); display: flex; align-items: center; gap: 12px; background: var(--color-ink); color: var(--color-bg); border: 4px solid var(--color-ink); padding: var(--space-4) var(--space-6); font-size: 12px; font-weight: 700; line-height: 1.4; box-shadow: var(--shadow-sm); transform: rotate(-0.2deg); }
.landing-pasos__note strong { background: var(--color-secondary); color: var(--color-ink); padding: 2px 6px; border: 2px solid var(--color-ink); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; white-space: nowrap; }

/* ── 07 BIBLIOTECA PREVIEW ── uses existing grid.css, just wrapper tweaks */
.landing-biblioteca { background-color: var(--color-bg); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; }
.landing-biblioteca__cta { margin-top: var(--space-8); text-align: center; }

/* ── 08 QUE INCLUYE ── */
.landing-incluye__compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }
.landing-compare { border: 4px solid var(--color-ink); padding: var(--space-6); box-shadow: var(--shadow-md); }
.landing-compare--bad { background: var(--color-bg); transform: rotate(-0.3deg); }
.landing-compare--good { background: var(--color-secondary); transform: rotate(0.4deg); }
.landing-compare h3 { font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; margin: 0 0 var(--space-4); display: flex; align-items: center; gap: 8px; }
.landing-compare h3 i { width: 28px; height: 28px; border: 3px solid var(--color-ink); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 14px; }
.landing-compare--bad h3 i { background: var(--color-accent); }
.landing-compare--good h3 i { background: var(--color-ink); color: var(--color-bg); }
.landing-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.landing-compare li { font-size: 13px; font-weight: 700; display: flex; gap: 8px; line-height: 1.4; }
.landing-compare--bad li::before { content: "✗"; color: var(--color-accent); font-weight: 900; flex-shrink: 0; }
.landing-compare--good li::before { content: "✓"; color: var(--color-ink); font-weight: 900; flex-shrink: 0; }
.landing-incluye__badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.landing-incluye__badges span { border: 3px solid var(--color-ink); padding: 8px 12px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: var(--color-bg); box-shadow: var(--shadow-sm); }
.landing-incluye__badges span:nth-child(odd) { transform: rotate(-0.6deg); }
.landing-incluye__badges span:nth-child(even) { transform: rotate(0.6deg); }
.landing-incluye__badges span.is-yellow { background: var(--color-secondary); }
.landing-incluye__badges span.is-violet { background: var(--color-muted); }
.landing-incluye__badges span.is-accent { background: var(--color-accent); }

/* ── 09 PARA QUIEN ── */
.landing-quien__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.landing-quien { border: 4px solid var(--color-ink); padding: var(--space-8); box-shadow: var(--shadow-md); }
.landing-quien--si { background: var(--color-secondary); transform: rotate(-0.3deg); }
.landing-quien--no { background: var(--color-bg); transform: rotate(0.4deg); }
.landing-quien h3 { font-weight: 900; text-transform: uppercase; font-size: 18px; margin: 0 0 var(--space-4); display: flex; align-items: center; gap: 10px; }
.landing-quien h3 i { width: 32px; height: 32px; border: 3px solid var(--color-ink); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 16px; box-shadow: var(--shadow-sm); }
.landing-quien--si h3 i { background: var(--color-ink); color: var(--color-bg); }
.landing-quien--no h3 i { background: var(--color-accent); color: var(--color-ink); }
.landing-quien ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.landing-quien li { font-size: 13px; font-weight: 700; line-height: 1.4; display: flex; gap: 8px; }
.landing-quien--si li::before { content: "✓"; font-weight: 900; }
.landing-quien--no li::before { content: "✗"; font-weight: 900; color: var(--color-accent); }

/* ── 10 PRICING ── */
.landing-pricing { background: var(--color-bg); text-align: center; }
.landing-pricing__card { max-width: 520px; margin: 0 auto; background: var(--color-bg); border: 4px solid var(--color-ink); box-shadow: var(--shadow-lg); padding: var(--space-8); transform: rotate(-0.4deg); position: relative; text-align: left; }
.landing-pricing__badge { position: absolute; top: -14px; right: -8px; background: var(--color-accent); border: 3px solid var(--color-ink); padding: 6px 12px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transform: rotate(2deg); box-shadow: 3px 3px 0 0 var(--color-ink); }
.landing-pricing__price { font-weight: 900; font-size: clamp(32px, 6vw, 48px); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.landing-pricing__price small { font-size: 14px; font-weight: 700; opacity: .6; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.landing-pricing__price em { font-style: normal; font-size: 14px; font-weight: 700; opacity: .5; letter-spacing: .06em; }
.landing-pricing__features { list-style: none; padding: 0; margin: var(--space-6) 0; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--color-ink); padding-top: var(--space-6); }
.landing-pricing__features li { font-size: 13px; font-weight: 700; display: flex; gap: 8px; }
.landing-pricing__features li::before { content: "✓"; font-weight: 900; color: var(--color-ink); background: var(--color-secondary); border: 2px solid var(--color-ink); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.landing-pricing__note { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .6; text-align: center; margin-top: var(--space-4); }

/* ── 11 TESTIMONIOS ── */
.landing-testis { background: var(--color-ink); color: var(--color-bg); }
.landing-testis .landing__title { color: var(--color-bg); }
.landing-testis .landing__title .text-stroke { -webkit-text-stroke: 2px var(--color-bg); color: transparent; }
.landing-testis .landing__lede { color: var(--color-bg); opacity: .7; }
.landing-testis__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.landing-testi { background: var(--color-bg); color: var(--color-ink); border: 4px solid var(--color-ink); box-shadow: 6px 6px 0 0 var(--color-secondary); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.landing-testi:nth-child(1) { transform: rotate(-0.4deg); }
.landing-testi:nth-child(2) { transform: rotate(0.5deg); background: var(--color-secondary); box-shadow: 6px 6px 0 0 var(--color-accent); }
.landing-testi:nth-child(3) { transform: rotate(-0.2deg); background: var(--color-muted); }
.landing-testi__quote { font-size: 14px; line-height: 1.5; font-weight: 700; margin: 0; flex: 1; }
.landing-testi__quote::before { content: """; font-weight: 900; font-size: 28px; line-height: 1; display: block; margin-bottom: 4px; }
.landing-testi__foot { display: flex; align-items: center; gap: 12px; border-top: 3px solid var(--color-ink); padding-top: var(--space-4); }
.landing-testi__avatar { width: 40px; height: 40px; border: 3px solid var(--color-ink); background: var(--color-ink); color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.landing-testi:nth-child(2) .landing-testi__avatar { background: var(--color-bg); color: var(--color-ink); }
.landing-testi__name { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.landing-testi__role { font-size: 11px; opacity: .6; margin: 0; }
.landing-testi__stars { font-size: 12px; letter-spacing: 2px; margin-top: 2px; }

/* ── 12 FAQ ── */
.landing-faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.landing-faq__item { border: 4px solid var(--color-ink); background: var(--color-bg); box-shadow: var(--shadow-sm); overflow: hidden; }
.landing-faq__item[open] { box-shadow: var(--shadow-md); }
.landing-faq__item summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.landing-faq__item summary::-webkit-details-marker { display: none; }
.landing-faq__item summary::after { content: "+"; font-weight: 900; font-size: 18px; width: 28px; height: 28px; border: 3px solid var(--color-ink); display: inline-flex; align-items: center; justify-content: center; background: var(--color-secondary); flex-shrink: 0; box-shadow: 2px 2px 0 0 var(--color-ink); }
.landing-faq__item[open] summary::after { content: "−"; background: var(--color-accent); }
.landing-faq__item p { padding: 0 20px 16px; margin: 0; font-size: 13px; line-height: 1.6; opacity: .8; border-top: 3px solid var(--color-ink); padding-top: 12px; margin-top: 0; }

/* ── 13 CTA FINAL ── */
.landing-cta { background: var(--color-secondary); text-align: center; padding: var(--space-16) var(--space-6); }
.landing-cta__inner { max-width: 640px; margin: 0 auto; background: var(--color-bg); border: 4px solid var(--color-ink); box-shadow: var(--shadow-lg); padding: var(--space-12) var(--space-8); transform: rotate(-0.3deg); }
.landing-cta__title { font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 4vw, 36px); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
.landing-cta__title .text-stroke { -webkit-text-stroke: 2px var(--color-ink); color: transparent; }
.landing-cta__sub { font-size: 14px; line-height: 1.5; opacity: .7; margin: 0 0 var(--space-6); }
.landing-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--space-4); }
.landing-cta__trust { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .landing-hero__inner { grid-template-columns: 1fr; }
  .landing-hero__mockup { order: -1; }
  .landing-pilares__grid { grid-template-columns: repeat(2,1fr); }
  .landing-pasos__steps { grid-template-columns: 1fr; }
  .landing-paso__arrow { transform: rotate(90deg); padding: 4px 0; }
  .landing-anatomia__grid { grid-template-columns: repeat(2,1fr); }
  .landing-testis__grid { grid-template-columns: 1fr; }
  .landing-testis__grid .landing-testi { transform: none !important; }
}
@media (max-width: 640px) {
  .landing__section { padding: var(--space-8) var(--space-4); }
  .landing-hero { padding: var(--space-8) var(--space-4) var(--space-12); }
  .landing-hero__title { font-size: 32px; }
  .landing__grid-3, .landing__grid-2, .landing-incluye__compare, .landing-quien__grid, .landing-anatomia__grid, .landing-pilares__grid { grid-template-columns: 1fr; }
  .landing-dolor__vs { grid-template-columns: 1fr; text-align: center; }
  .landing-dolor__vs-sep { margin: 0 auto; }
  .landing-pilar, .landing-dolor__card, .landing-anatomia__item, .landing-paso, .landing-quien, .landing-compare { transform: none !important; }
  .landing-cta__inner { padding: var(--space-6); transform: none; }
  .landing-pricing__card { transform: none; padding: var(--space-6); }
}