/* ============================================================
   DSS Educational Institute — design tokens and components
   Mirrors the approved homepage prototype. Reference these
   classes from Kadence blocks and patterns.
   ============================================================ */

:root{
  --dss-paper:#F2F5FB;
  --dss-surface:#FFFFFF;
  --dss-surface-2:#E8EEF9;
  --dss-ink:#101A2E;
  --dss-muted:#55607A;
  --dss-line:#D8E1F0;
  --dss-royal:#163A86;
  --dss-royal-deep:#0D2456;
  --dss-azure:#2F64E6;
  --dss-gold:#F2A530;
  --dss-gold-deep:#D4860A;
  --dss-coral:#E0523F;
  --dss-ink-on-gold:#3A2705;
  --dss-shadow:0 20px 44px -24px rgba(13,36,86,.5);
  --dss-shadow-sm:0 8px 20px -14px rgba(13,36,86,.5);
  --dss-radius:18px;
  --dss-font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --dss-font-body:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Typographic signatures ---- */
.dss-voice{
  font-family:var(--dss-font-display);
  font-style:italic;
  font-weight:500;
}
.dss-heartbeat{
  font-family:var(--dss-font-display);
  font-style:italic;
  font-weight:500;
  color:var(--dss-gold-deep);
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.2;
}
.dss-eyebrow{
  font-family:var(--dss-font-body);
  font-weight:600;
  color:var(--dss-azure);
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.dss-eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--dss-gold);
  border-radius:2px;
}

/* ---- Buttons ---- */
.dss-btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--dss-font-body);font-weight:600;font-size:1rem;
  border-radius:999px;padding:.85em 1.55em;cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dss-btn-primary{
  background:var(--dss-gold);color:var(--dss-ink-on-gold);
  box-shadow:0 12px 26px -12px rgba(212,134,10,.85);
}
.dss-btn-primary:hover{transform:translateY(-2px);background:var(--dss-gold-deep);color:var(--dss-ink-on-gold);}
.dss-btn-ghost{background:transparent;color:var(--dss-ink);border-color:var(--dss-line);}
.dss-btn-ghost:hover{border-color:var(--dss-royal);color:var(--dss-royal);}
.dss-btn:focus-visible{outline:3px solid var(--dss-azure);outline-offset:3px;}

/* ---- Trust chip ---- */
.dss-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--dss-surface);border:1px solid var(--dss-line);
  border-radius:999px;padding:8px 14px;font-size:.84rem;font-weight:600;
  color:var(--dss-ink);box-shadow:var(--dss-shadow-sm);
}

/* ---- Big "sí" watermark for the method and final sections ---- */
.dss-si-watermark{position:relative;overflow:hidden;}
.dss-si-watermark > .dss-si{
  position:absolute;right:-2%;top:-8%;
  font-family:var(--dss-font-display);font-weight:600;
  font-size:clamp(9rem,26vw,22rem);color:var(--dss-gold);opacity:.14;
  line-height:.8;pointer-events:none;user-select:none;
}

/* ---- Surfaces ---- */
.dss-card{
  background:var(--dss-surface);border:1px solid var(--dss-line);
  border-radius:var(--dss-radius);box-shadow:var(--dss-shadow-sm);
}
.has-dss-royal-background{background-color:var(--dss-royal)!important;color:#fff;}
.has-dss-royaldeep-background{background-color:var(--dss-royal-deep)!important;color:#fff;}
.has-dss-paper-background{background-color:var(--dss-paper)!important;}
.has-dss-gold-color{color:var(--dss-gold)!important;}
.has-dss-coral-color{color:var(--dss-coral)!important;}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion:reduce){
  .dss-btn{transition:none;}
}