/* ============================================================
   MIGO — Manual de Marca Styles
   ============================================================ */


/* ── FONTS ── */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ── BACK BUTTON ── */

.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(27, 34, 30, 0.85);
  border: 1px solid rgba(182, 242, 220, 0.25);
  border-radius: 100px;
  color: #B6F2DC;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: background 0.2s, border-color 0.2s;
}
.back-btn:hover {
  background: rgba(27, 34, 30, 0.98);
  border-color: rgba(182, 242, 220, 0.55);
}
.back-btn svg {
  flex-shrink: 0;
}


/* ── BASE ── */

:root {
  --green: #B6F2DC;
  --dk:    #1B221E;
  --night: #0F1613;
  --pink:  #E77292;
  --blue:  #7AB6DA;
  --off:   #F4F4F4;
  --gray:  #666666;
  --gl:    #EEEEEE;
  --body:  #444444;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 72px 0 48px;
}

.page {
  width: 1122px;
  height: 794px;
  background: #fff;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── CORNER MARKER ── */

.corner {
  position: absolute;
  bottom: 14px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.corner .pn       { font-size: 10px; color: var(--gray); font-weight: 400; }
.corner-dk .pn    { color: rgba(255, 255, 255, 0.3); }


/* ── SECTION LABELS ── */

.sn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dk);
  margin-bottom: 4px;
}
.sn-g { color: var(--green); }
.st   { font-size: 26px; font-weight: 700; color: var(--dk); margin-bottom: 6px; }
.st-g { color: var(--green); }
.rule { width: 36px; height: 2px; background: var(--green); margin-bottom: 18px; }
.stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); }


/* ── CHIPS ── */

.chip-g {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: rgba(182, 242, 220, 0.18);
  color: var(--dk);
  border: 1px solid rgba(182, 242, 220, 0.45);
}
.chip-pr {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--green);
  color: var(--dk);
}
.chip-sc {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--dk);
  color: var(--green);
}


/* ── DIVIDER PAGES ── */

.div-wm {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 280px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.div-body  { position: absolute; top: 50%; transform: translateY(-50%); left: 40px; }
.div-part  { font-size: 11px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 18px; }
.div-title { font-size: 68px; font-weight: 700; line-height: 1.0; margin-bottom: 22px; }
.div-hr    { width: 70px; height: 1px; background: var(--green); margin-bottom: 18px; }
.div-sub   { font-size: 15px; }


/* ── CARDS ── */

.card-off { background: var(--off); border-radius: 12px; padding: 18px 20px; }
.card-dk  { background: var(--dk);  border-radius: 12px; padding: 18px 20px; }


/* ── BODY TEXT ── */

.body-txt { font-size: 14px; line-height: 1.7; color: var(--body); }
.body-s   { font-size: 13px; line-height: 1.6; color: var(--body); }


/* ── CLEAR SPACE DIAGRAM ── */

.clear-space-diagram {
  position: relative;
  padding: 32px 40px;
  border: 1.5px dashed rgba(182, 242, 220, 0.7);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clear-space-diagram::before,
.clear-space-diagram::after,
.cs-sides::before,
.cs-sides::after {
  content: 'O';
  position: absolute;
  font-size: 17px;
  font-weight: 700;
  color: #B6F2DC;
  background: #fff;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
}

/* top */
.clear-space-diagram::before {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
}

/* bottom */
.clear-space-diagram::after {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
}

.cs-sides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* left */
.cs-sides::before {
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 0;
}

/* right */
.cs-sides::after {
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 0;
}


/* ── RESPONSIVE (index-responsive.html only) ── */

@media (max-width: 1160px) {
  body {
    padding: 52px 0 40px;
    gap: 12px;
    align-items: flex-start;
  }
  .back-btn {
    top: 10px;
    left: 10px;
    font-size: 12px;
    padding: 7px 14px;
  }
}