/* Concepto Smart — Landing pública del Programa de Afiliados */

body.landing { background: var(--bg); }

.ld-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.ld-top .ld-logo { display:flex; align-items:center; gap:10px; text-decoration:none }
.ld-top .ld-logo img { height: 34px; display:block }
.ld-nav { display:flex; align-items:center; gap:22px }
.ld-nav a.ld-navlink { color: var(--ink-2); text-decoration:none; font-weight:600; font-size:14px }
.ld-nav a.ld-navlink:hover { color: var(--ink) }
.ld-user-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:#fff;
  border:1px solid var(--hairline); color: var(--ink); box-shadow: var(--shadow-sm);
  flex-shrink:0;
}
.ld-user-btn:hover { color: var(--brand-blue); border-color: var(--brand-blue); }

.ld-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ld-section { padding: 64px 0; }
.ld-section.tight { padding: 40px 0; }
.ld-eyebrow {
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color: var(--brand-blue-600);
  background: var(--brand-blue-50); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom:14px;
}
.ld-h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; line-height:1.12; letter-spacing:-.02em; color: var(--ink); margin:0 0 16px; }
.ld-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing:-.01em; color: var(--ink); margin:0 0 10px; }
.ld-lead { font-size: 17px; line-height:1.6; color: var(--ink-2); margin:0 0 22px; max-width: 620px; }
.ld-sub { font-size: 15px; line-height:1.6; color: var(--ink-2); margin: 0 0 32px; max-width: 620px; }

.ld-hero { display:grid; grid-template-columns: 1.05fr .95fr; gap:44px; align-items:center; }
.ld-hero-badges { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; }
.ld-hero-badges span { font-size:13px; color: var(--ink-2); font-weight:600; display:flex; align-items:center; gap:6px; }
.ld-hero-badges svg { color: var(--brand-green); flex-shrink:0 }
.ld-hero-art {
  position:relative; border-radius: var(--r-xl); overflow:hidden; min-height:360px;
  background: linear-gradient(155deg, var(--brand-blue) 0%, var(--brand-blue-600) 55%, var(--brand-green-600) 130%);
  box-shadow: var(--shadow-lg); padding: 30px; display:flex; flex-direction:column; justify-content:space-between;
}
.ld-hero-art .pill { align-self:flex-start; background:rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:12.5px;
  padding:7px 14px; border-radius:var(--r-pill); backdrop-filter: blur(6px); }
.ld-hero-stat { color:#fff; }
.ld-hero-stat .n { font-size:52px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.ld-hero-stat .l { font-size:14px; opacity:.9; margin-top:6px; font-weight:600 }
.ld-hero-icons { display:flex; gap:12px; }
.ld-hero-icons .ic { width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); }

.ld-cta-row { display:flex; gap:12px; flex-wrap:wrap; }

.ld-grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.ld-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.ld-grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }

.ld-feat {
  background:#fff; border:1px solid var(--hairline); border-radius: var(--r-lg); padding:22px;
  box-shadow: var(--shadow-sm);
}
.ld-feat .ic {
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background: var(--brand-blue-50); color: var(--brand-blue-600); margin-bottom:14px;
}
.ld-feat.green .ic { background: var(--brand-green-50); color: var(--brand-green-600); }
.ld-feat h4 { font-size:15.5px; font-weight:700; margin:0 0 6px; color: var(--ink); }
.ld-feat p { font-size:13.5px; line-height:1.55; color: var(--ink-2); margin:0; }

.ld-steps { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; counter-reset: ldstep; }
.ld-step { position:relative; background:#fff; border:1px solid var(--hairline); border-radius: var(--r-lg); padding:24px 20px; }
.ld-step .num {
  width:34px; height:34px; border-radius:50%; background: linear-gradient(180deg,var(--brand-blue),var(--brand-blue-600));
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:14.5px;
}
.ld-step h4 { font-size:14.5px; font-weight:700; margin:0 0 6px; }
.ld-step p { font-size:13px; color:var(--ink-2); margin:0; line-height:1.5 }

.ld-comm-card {
  background: linear-gradient(160deg,#fff,var(--brand-green-50)); border:1px solid var(--hairline);
  border-radius: var(--r-xl); padding:30px; display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center;
}
.ld-comm-example .row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--hairline); font-size:14.5px }
.ld-comm-example .row:last-child { border-bottom:none; font-weight:800; font-size:18px; color: var(--brand-green-600) }
.ld-comm-rules { list-style:none; margin:0; padding:0; }
.ld-comm-rules li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin-bottom:12px; line-height:1.5 }
.ld-comm-rules li svg { color: var(--brand-green); flex-shrink:0; margin-top:2px }

.ld-check-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px 24px; }
.ld-check-grid li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color: var(--ink-2); list-style:none; line-height:1.5 }
.ld-check-grid li svg { color:#fff; background: var(--brand-green); border-radius:50%; padding:3px; flex-shrink:0; margin-top:1px }

/* vitrina de productos (solo lectura) */
.ld-prod-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.ld-prod-card { background:#fff; border:1px solid var(--hairline); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.ld-prod-card img, .ld-prod-card .ph { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background: var(--brand-blue-50); }
.ld-prod-card .ph { display:flex; align-items:center; justify-content:center; color: var(--brand-blue) }
.ld-prod-card .body { padding:13px; }
.ld-prod-card .nom { font-weight:700; font-size:13.5px; line-height:1.3; min-height:35px; color:var(--ink) }
.ld-prod-card .precio { font-weight:800; font-size:16.5px; margin-top:6px; color: var(--ink) }
.ld-prod-note { font-size:12px; color: var(--ink-3); margin-top:4px }

/* faq */
.ld-faq-item { border-bottom:1px solid var(--hairline); }
.ld-faq-item:first-child { border-top:1px solid var(--hairline); }
.ld-faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:18px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; font-weight:700; color: var(--ink);
}
.ld-faq-q .car { transition: transform .2s ease; color: var(--ink-3); flex-shrink:0 }
.ld-faq-q .car { color: var(--brand-blue); }
.ld-faq-item.open .ld-faq-q .car { transform: rotate(45deg); }
.ld-faq-a { max-height:0; overflow:hidden; transition: max-height .25s ease; }
.ld-faq-item.open .ld-faq-a { max-height:400px; }
.ld-faq-a p { font-size:14px; color: var(--ink-2); line-height:1.6; margin:0 4px 18px; }

/* formulario de contacto */
.ld-contact { background: linear-gradient(160deg,#fff,var(--brand-blue-50)); border-radius: var(--r-xl);
  border:1px solid var(--hairline); padding:34px; display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:center; }

/* footer */
.ld-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 44px 0 26px; }
.ld-footer .ld-wrap { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px }
.ld-footer img { height:30px; opacity:.95 }
.ld-footer .tag { font-size:13px; letter-spacing:.04em; color: rgba(255,255,255,.55) }
.ld-footer a { color: rgba(255,255,255,.75); text-decoration:none; font-size:13.5px }
.ld-footer a:hover { color:#fff }
.ld-footer .links { display:flex; gap:20px; flex-wrap:wrap; justify-content:center }
.ld-footer .copy { font-size:12px; color: rgba(255,255,255,.4); margin-top:10px }

@media (max-width: 920px) {
  .ld-hero { grid-template-columns: 1fr; }
  .ld-hero-art { min-height:260px; }
  .ld-grid-4 { grid-template-columns: repeat(2,1fr); }
  .ld-grid-3 { grid-template-columns: repeat(2,1fr); }
  .ld-steps { grid-template-columns: repeat(2,1fr); }
  .ld-comm-card { grid-template-columns: 1fr; }
  .ld-check-grid { grid-template-columns: 1fr; }
  .ld-prod-grid { grid-template-columns: repeat(3,1fr); }
  .ld-contact { grid-template-columns: 1fr; padding:24px; }
  .ld-nav { display:none; }
}
@media (max-width: 560px) {
  .ld-grid-4, .ld-grid-3, .ld-grid-2, .ld-steps { grid-template-columns: 1fr 1fr; }
  .ld-prod-grid { grid-template-columns: repeat(2,1fr); }
  .ld-section { padding: 44px 0; }
}