/* =========================================================
   SEMILLAS DE SABIDURÍA · prefijo sds-
   Paleta ESCOLI: morado #370C56 · rojo #F74436 · dorado #F08E03
========================================================= */
.sds{
  --sds-purple:#370C56;
  --sds-purple-2:#4E1677;
  --sds-red:#F74436;
  --sds-gold:#F08E03;
  --sds-cream:#FBF6EF;
  --sds-cream-2:#F4EBDF;
  --sds-ink:#2A1A36;
  --sds-muted:#6E5F78;
  --sds-line:rgba(55,12,86,.12);
  --sds-radius:22px;
  font-family:'Roboto', system-ui, sans-serif;
  color:var(--sds-ink);
  background:var(--sds-cream);
  overflow-x:hidden;
}
.sds *, .sds *::before, .sds *::after{ box-sizing:border-box; }
.sds-wrap{ max-width:1120px; margin:0 auto; padding:0 16px; }
.sds-center{ text-align:center; }

/* ---------- Eyebrow / títulos ---------- */
.sds-eyebrow{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sds-gold);
  background:rgba(240,142,3,.12);
  border:1px solid rgba(240,142,3,.35);
  margin-bottom:18px;
}
.sds-eyebrow--dark{ color:var(--sds-purple); background:rgba(55,12,86,.06); border-color:var(--sds-line); }

.sds-h2{
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--sds-purple);
  margin:0 0 16px;
}

/* =================== HERO =================== */
.sds-hero{
  position:relative;
  padding:120px 0 80px;
  background:
    radial-gradient(circle at 12% 18%, rgba(240,142,3,.22), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(247,68,54,.20), transparent 45%),
    linear-gradient(150deg, #24083A 0%, var(--sds-purple) 55%, var(--sds-purple-2) 100%);
  color:#fff;
}
.sds-hero::before{ /* textura de puntos */
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, #000 40%, transparent);
  pointer-events:none;
}
.sds-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.sds-title{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.04;
  margin:0 0 20px;
}
.sds-title span{ color:var(--sds-gold); }
.sds-lead{
  font-size:1.15rem;
  line-height:1.65;
  color:rgba(255,255,255,.86);
  max-width:520px;
  margin:0 0 26px;
}
.sds-pills{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.sds-pills li{
  padding:8px 14px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:500;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

/* =================== FORM CARD =================== */
.sds-form-card{
  background:#fff;
  color:var(--sds-ink);
  border-radius:var(--sds-radius);
  padding:34px 32px 30px;
  box-shadow:0 30px 80px rgba(20,4,34,.45);
  position:relative;
  overflow:hidden;
  scroll-margin-top:110px;
}
.sds-progress{
  position:absolute; top:0; left:0; right:0;
  height:5px;
  background:var(--sds-cream-2);
}
.sds-progress-bar{
  display:block; height:100%; width:25%;
  background:linear-gradient(90deg, var(--sds-gold), var(--sds-red));
  transition:width .45s ease;
}

.sds-step{ border:0; padding:0; margin:0 0 22px; min-width:0; }
/* Con JS: solo se ve el paso activo */
.sds-form.is-js .sds-step{ display:none; margin:0; }
.sds-form.is-js .sds-step.is-active{ display:block; animation:sdsIn .4s ease both; }
@keyframes sdsIn{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none; } }

.sds-q{
  font-size:1.35rem;
  line-height:1.35;
  color:var(--sds-muted);
  margin:0 0 18px;
  padding:0;
}
.sds-q strong{ color:var(--sds-purple); font-weight:900; letter-spacing:-.02em; }
.sds-q-sub{ font-size:.95rem; color:var(--sds-muted); }
.sds-q-sub b{ color:var(--sds-purple); }

.sds-label{ display:block; font-size:.85rem; font-weight:700; color:var(--sds-purple); margin:14px 0 6px; }
.sds-label span{ font-weight:400; color:var(--sds-muted); }

.sds-input{
  width:100%;
  font:inherit;
  font-size:1.05rem;
  padding:15px 16px;
  border-radius:14px;
  border:1.5px solid var(--sds-line);
  background:var(--sds-cream);
  color:var(--sds-ink);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.sds-input:focus{
  border-color:var(--sds-gold);
  background:#fff;
  box-shadow:0 0 0 4px rgba(240,142,3,.15);
}
.sds-input.is-invalid{ border-color:var(--sds-red); }
.sds-otro{ margin-top:12px; }

.sds-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.sds-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sds-chip{
  font:inherit; font-size:.92rem; font-weight:500;
  padding:10px 15px;
  border-radius:999px;
  border:1.5px solid var(--sds-line);
  background:#fff;
  color:var(--sds-purple);
  cursor:pointer;
  transition:all .2s;
}
.sds-chip:hover{ border-color:var(--sds-gold); }
.sds-chip.is-on{ background:var(--sds-purple); border-color:var(--sds-purple); color:#fff; }

.sds-check{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; line-height:1.5; cursor:pointer; }
.sds-check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--sds-purple); flex:0 0 auto; }
.sds-check a{ color:var(--sds-purple); font-weight:700; }

.sds-note{ font-size:.85rem; color:var(--sds-muted); margin:10px 0 0; }
.sds-err{ font-size:.88rem; color:#C62A1E; margin:8px 0 0; }
.sds-legal{ font-size:.8rem; color:var(--sds-muted); margin:16px 0 0; text-align:center; }
.sds-alert{ margin:6px 0 16px; padding:12px 14px; border-radius:12px; background:#FDECEA; color:#A52217; font-size:.92rem; }

.sds-actions{ display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:20px; }

/* ---------- Botones ---------- */
.sds-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-weight:700; font-size:1rem;
  padding:14px 26px;
  border:0; border-radius:14px;
  color:#fff; text-decoration:none; cursor:pointer;
  background:var(--sds-purple);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.sds-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(55,12,86,.28); }
.sds-btn--main{ background:linear-gradient(135deg, var(--sds-red), var(--sds-gold)); }
.sds-btn--main:hover{ box-shadow:0 12px 28px rgba(247,68,54,.35); }
.sds-btn--ghost{ background:transparent; color:var(--sds-purple); border:1.5px solid var(--sds-purple); }
.sds-btn[disabled]{ opacity:.6; pointer-events:none; }
.sds-link{ font:inherit; background:none; border:0; color:var(--sds-muted); cursor:pointer; text-decoration:underline; padding:6px; }

/* ---------- Estado: registrado ---------- */
.sds-done{ text-align:center; padding:10px 4px; }
.sds-done h2{ font-size:1.6rem; font-weight:900; letter-spacing:-.02em; color:var(--sds-purple); margin:14px 0 8px; }
.sds-done p{ color:var(--sds-muted); line-height:1.6; }
.sds-done-next{ background:var(--sds-cream); border-radius:14px; padding:14px; margin:16px 0 22px; }
.sds-done-seed{
  width:76px; height:76px; margin:0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(240,142,3,.12);
}
.sds-done-seed svg{ width:44px; height:44px; fill:none; stroke:var(--sds-gold); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* =================== MUESTRA =================== */
.sds-sample{ padding:96px 0; }
.sds-sample-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.sds-sample-intro > p{ color:var(--sds-muted); line-height:1.7; font-size:1.05rem; }
.sds-parts{ list-style:none; counter-reset:p; padding:0; margin:24px 0 0; }
.sds-parts li{
  counter-increment:p;
  position:relative;
  padding:0 0 16px 46px;
  line-height:1.55;
  color:var(--sds-muted);
}
.sds-parts li::before{
  content:counter(p);
  position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; font-size:.9rem;
  color:#fff; background:var(--sds-purple);
}
.sds-parts b{ color:var(--sds-purple); }

.sds-letter{
  background:#fff;
  border-radius:var(--sds-radius);
  padding:34px 36px;
  border:1px solid var(--sds-line);
  box-shadow:0 24px 60px rgba(55,12,86,.10);
  transform:rotate(-1deg);
}
.sds-letter-head{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:.8rem; color:var(--sds-muted);
  padding-bottom:16px; margin-bottom:20px;
  border-bottom:1px solid var(--sds-line);
}
.sds-letter-from{ font-weight:700; color:var(--sds-purple); }
.sds-letter h3{ font-size:1.55rem; font-weight:900; letter-spacing:-.02em; color:var(--sds-purple); margin:0 0 14px; }
.sds-letter p{ line-height:1.75; color:#4A3B55; }
.sds-drop::first-letter{
  float:left;
  font-size:3.4rem; line-height:.9; font-weight:900;
  color:var(--sds-gold);
  margin:6px 10px 0 0;
}
.sds-letter-q{
  margin:22px 0;
  padding:16px 18px;
  border-left:3px solid var(--sds-gold);
  background:var(--sds-cream);
  border-radius:0 12px 12px 0;
  font-style:italic;
  color:var(--sds-purple);
  font-size:1.05rem;
  line-height:1.55;
}
.sds-letter-q span{
  display:block; font-style:normal; font-weight:700;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sds-gold); margin-bottom:6px;
}
.sds-letter-practice{ font-size:.95rem; }

/* =================== CÓMO FUNCIONA =================== */
.sds-how{ padding:80px 0; background:var(--sds-cream-2); }
.sds-how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.sds-how-item{ background:#fff; border-radius:18px; padding:28px 24px; border:1px solid var(--sds-line); }
.sds-how-item span{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  font-weight:900; color:var(--sds-gold); background:rgba(240,142,3,.12);
}
.sds-how-item h3{ font-size:1.15rem; font-weight:900; color:var(--sds-purple); margin:16px 0 6px; }
.sds-how-item p{ margin:0; color:var(--sds-muted); line-height:1.6; }

/* =================== FAQ =================== */
.sds-faq{ padding:88px 0; }
.sds-faq-wrap{ max-width:760px; }
.sds-faq details{ border-bottom:1px solid var(--sds-line); padding:18px 4px; }
.sds-faq summary{
  cursor:pointer; list-style:none;
  font-weight:700; color:var(--sds-purple); font-size:1.05rem;
  display:flex; justify-content:space-between; gap:12px;
}
.sds-faq summary::-webkit-details-marker{ display:none; }
.sds-faq summary::after{ content:"+"; color:var(--sds-gold); font-size:1.4rem; line-height:1; transition:transform .2s; }
.sds-faq details[open] summary::after{ transform:rotate(45deg); }
.sds-faq details p{ color:var(--sds-muted); line-height:1.65; margin:10px 0 0; }

/* =================== CIERRE =================== */
.sds-final{ padding:0 0 96px; }
.sds-final-card{
  text-align:center;
  padding:56px 24px;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(240,142,3,.28), transparent 45%),
    linear-gradient(140deg, #24083A, var(--sds-purple));
}
.sds-final-card h2{ font-size:clamp(1.7rem, 3.6vw, 2.5rem); font-weight:900; letter-spacing:-.03em; margin:0 0 10px; }
.sds-final-card p{ color:rgba(255,255,255,.82); margin:0 0 26px; font-size:1.05rem; }

/* =================== RESPONSIVE =================== */
@media (max-width: 960px){
  .sds-hero{ padding:100px 0 56px; }
  .sds-hero-grid, .sds-sample-grid{ grid-template-columns:1fr; gap:32px; }
  .sds-letter{ transform:none; }
  .sds-how-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  /* La primera pregunta queda cerca del inicio de pantalla en Instagram. */
  .sds-hero{ padding:84px 0 44px; }
  .sds-eyebrow{ margin-bottom:10px; }
  .sds-title{ font-size:1.75rem; margin-bottom:10px; }
  .sds-lead{ font-size:.95rem; line-height:1.5; margin-bottom:0; }
  .sds-pills{ display:none; }
  .sds-hero-grid{ gap:16px; }
  .sds-form-card{ padding:30px 20px 24px; }
  .sds-q{ font-size:1.2rem; }
  .sds-row{ grid-template-columns:1fr; gap:0; }
  .sds-letter{ padding:26px 22px; }
  .sds-actions{ justify-content:space-between; }
  .sds-actions .sds-btn{ flex:1; }
  .sds-pills li{ font-size:.82rem; }
}
@media (prefers-reduced-motion: reduce){
  .sds *{ animation:none !important; transition:none !important; }
}

/* =========================================
   ESCOLI · CORRECCIÓN ESPACIO SUPERIOR MÓVIL
   ========================================= */

@media (max-width: 768px) {

    body > main {
        padding-top: 0 !important;
    }

    main.sds {
        padding-top: 0 !important;
    }

    .sds-hero {
        padding-top: 120px;
    }

}