/* ── Custom properties ─────────────────────────────────── */
:root {
  --c-bg:      #121414; --c-surface:  #1e2020; --c-dk:     #09090b;
  --c-border:  #4a473b; --c-border-d: #27272a;
  --c-text:    #e2e2e2; --c-muted:    #ccc6b7; --c-dim:    #52525b;
  --c-yellow:  #f3e5ab; --c-yellow-d: #d4c78f; --c-tag:    #333535;

  --f-mono:    "Liberation Mono-Regular", Helvetica;
  --f-mono-b:  "Liberation Mono-Bold",    Helvetica;
  --f-grot:    "Space Grotesk-Regular",   Helvetica;
  --f-grot-b:  "Space Grotesk-Bold",      Helvetica;
  --f-inter:   "Inter-Regular",           Helvetica;
  --f-inter-s: "Inter-SemiBold",          Helvetica;
  --f-bee:     "ABeeZee-Regular",         Helvetica;
}

/* ── Base ──────────────────────────────────────────────── */
.html-body {
  background: var(--c-bg);
  width: 100%;
  min-height: 100vh;
}

/* position:relative en todos los elementos internos comunes */
.html-body .div,   .html-body .div-2,  .html-body .div-3,
.html-body .div-wrapper, .html-body .margin,  .html-body .margin-2,
.html-body .margin-3,    .html-body .heading-margin,
.html-body .container,   .html-body .container-2,  .html-body .container-3,
.html-body .container-4, .html-body .container-5,  .html-body .container-6,
.html-body .container-7, .html-body .container-8,  .html-body .container-9,
.html-body .container-10,.html-body .container-11, .html-body .container-12,
.html-body .container-13,.html-body .container-14, .html-body .container-15,
.html-body .container-wrapper, .html-body .heading-2, .html-body .border,
.html-body .menu-option, .html-body .heading { position: relative; }

/* ── Layout: flex-col full-width auto ──────────────────── */
.html-body .div-2,
.html-body .margin, .html-body .margin-2, .html-body .heading-margin,
.html-body .container-2, .html-body .container-7, .html-body .container-10,
.html-body .heading-2 {
  display: flex; flex-direction: column; align-items: flex-start;
  align-self: stretch; width: 100%; flex: 0 0 auto;
}
.html-body .margin         { padding-bottom: 16px; }
.html-body .margin-2       { padding-bottom: 32px; }
.html-body .heading-margin { padding-bottom: 24px; }
.html-body .container-2    { gap: 16px; padding-top: 8px; }
.html-body .container-7    { opacity: .9; }
.html-body .container-10   { gap: 16px; }
.html-body .heading-2      { padding-top: 8px; }

/* flex-col full-width with flex-start items, stretch, flex:0 (sections) */
.html-body .section-crontab-l,
.html-body .container-3, .html-body .container-5 {
  display: flex; align-items: flex-start;
  align-self: stretch; width: 100%; flex: 0 0 auto;
}
.html-body .section-crontab-l {
  position: relative;
  flex-direction: column; padding: 80px;
  background-color: var(--c-yellow); border-radius: 8px; overflow: hidden;
}
.html-body .container-3 { gap: 8px;  padding-top: 16px; }
.html-body .container-5 {
  gap: 24px; padding-top: 16px;
  flex-direction: row; min-width: 0;
}
.html-body .container-5 .container-6 {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  width: auto;
}
.html-body .container-5 .text-5,
.html-body .container-5 .text-6 {
  width: auto;
  max-width: 100%;
  height: auto;
  white-space: normal;
  align-self: stretch;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Layout: inline-flex col ───────────────────────────── */
.html-body .div, .html-body .div-3,
.html-body .div-wrapper, .html-body .margin-3,
.html-body .container-6, .html-body .icon-wrapper {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; flex: 0 0 auto;
}
.html-body .menu-option {
  display: inline-flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
  text-align: center;
  flex: 0 0 auto;
}
.html-body .menu-option a {
  text-decoration: none;
}
.html-body .div-wrapper  { padding: 4px 12px; align-self: stretch; background-color: var(--c-tag); border: 1px solid var(--c-border); }
.html-body .margin-3     { padding-bottom: 8px; }
.html-body .menu-option:hover {
  padding-bottom: 4px; border-bottom: 1px solid var(--c-yellow);
}
.html-body .container-6  { gap: 8px; }
.html-body .icon-wrapper { padding: 32px; position: absolute; top: 0; right: 0; opacity: .1; }

/* ── Layout: inline-flex row ───────────────────────────── */
.html-body .container-12, .html-body .container-14, .html-body .container-15,
.html-body .container-13 {
  display: inline-flex; align-items: flex-start; flex: 0 0 auto;
}
.html-body .container-12 { gap: 32px; }
.html-body .container-13 { align-items: center; gap: 8px; }
.html-body .container-14 { align-items: center; gap: 32px; }
.html-body .container-15 { gap: 16px; }

/* ── Layout: flex grow ─────────────────────────────────── */
.html-body .container, .html-body .container-wrapper {
  display: flex; flex-direction: column;
  align-items: flex-start; flex: 1; flex-grow: 1;
}
.html-body .container { gap: 16px; }

/* ── Typography: shared base (todos los text-*) ─────────── */
/* margin-top:-1px, letter-spacing:0, position:relative ya heredado */
.html-body [class^="text-"], .html-body [class*=" text-"],
.html-body [class^="text-wrapper"], .html-body [class*=" text-wrapper"],
.html-body .p, .html-body .located-in-the-heart {
  position: relative; margin-top: -1px; letter-spacing: 0;
}

/* display:flex + align-items:center para todos menos .p, .text-6, .text-wrapper-9, .located-in-the-heart */
.html-body [class^="text-wrapper"], .html-body [class*=" text-wrapper"],
.html-body .text, .html-body .text-2,
.html-body .text-3, .html-body .text-4, .html-body .text-5,
.html-body .text-7, .html-body .text-8, .html-body .text-9,
.html-body .text-10,.html-body .text-11,.html-body .text-12,
.html-body .text-13,.html-body .text-14,.html-body .text-15,.html-body .text-16 {
  display: flex; align-items: center;
}

/* align-self:stretch para text-wrapper-2 al 8 */
.html-body .text-wrapper-2, .html-body .text-wrapper-3,
.html-body .text-wrapper-4, .html-body .text-wrapper-5,
.html-body .text-wrapper-6, .html-body .text-wrapper-7,
.html-body .text-wrapper-8 { align-self: stretch; }

/* ── Fuentes ────────────────────────────────────────────── */
.html-body .text-wrapper-2,
.html-body .text, .html-body .text-2,
.html-body .text-7, .html-body .text-8,
.html-body .text-10,.html-body .text-11,.html-body .text-12
                        { font-family: var(--f-mono);   font-weight: 400; }
.html-body .text-14, .html-body .text-15, .html-body .text-16
                        { font-family: var(--f-mono);   font-weight: 400; font-size: 14px; letter-spacing: -.7px; line-height: 20px; height: 20px; white-space: nowrap; }
.html-body .text-wrapper-4, .html-body .text-wrapper-6, .html-body .text-9
                        { font-family: var(--f-mono-b); font-weight: 700; }
.html-body .text-wrapper-3, .html-body .text-wrapper-5
                        { font-family: var(--f-grot-b); font-weight: 700; }
.html-body .text-wrapper-7, .html-body .text-wrapper-8
                        { font-family: var(--f-grot);   font-weight: 400; }
.html-body .p, .html-body .text-6, .html-body .text-wrapper-9,
.html-body .located-in-the-heart
                        { font-family: var(--f-inter);  font-weight: 400; }
.html-body .text-3, .html-body .text-4, .html-body .text-5
                        { font-family: var(--f-inter-s); font-weight: 600; }
.html-body .text-wrapper, .html-body .text-wrapper-10
                        { font-family: var(--f-bee);    font-weight: 400; }

/* ── Tamaños y colores individuales ─────────────────────── */
.html-body .text-wrapper {
  position: relative; top: auto; left: auto;
  margin-top: 8px; text-align: center;
  height: auto; color: var(--c-yellow); font-size: 24px; line-height: 16px;
}
.html-body .text-wrapper-2  { color: var(--c-yellow);  font-size: 24px; line-height: 32px; }
.html-body .text-wrapper-3  { color: var(--c-text);    font-size: 32px; line-height: 38.4px; }
.html-body .text-wrapper-4  { color: #27272a;          font-size: 20px; line-height: 28px; }
.html-body .text-wrapper-5  { color: var(--c-dk);      font-size: 48px; line-height: 60px; }
.html-body .text-wrapper-6  { color: var(--c-dk);      font-size: 14px; line-height: 20px; }
.html-body .text-wrapper-7  { color: var(--c-dk);      font-size: 20px; line-height: 28px; }
.html-body .text-wrapper-8  { color: var(--c-text);    font-size: 20px; line-height: 28px; }
.html-body .text-wrapper-9  { align-self: stretch; color: var(--c-muted); font-size: 14px; line-height: 20px; }
.html-body .text-wrapper-10 { width: fit-content; color: var(--c-yellow); font-size: 20px; line-height: 28px; white-space: nowrap; text-shadow: 0 0 12px #f3e5ab66; }
.html-body .p               { align-self: stretch; color: var(--c-muted); font-size: 16px; line-height: 26px; }
.html-body .located-in-the-heart { align-self: stretch; color: var(--c-muted); font-size: 18px; line-height: 28px; }

/* Tags mono sm */
.html-body .text, .html-body .text-2
                   { height: 16px; color: var(--c-yellow-d); font-size: 12px; line-height: 16px; white-space: nowrap; }
.html-body .text   { width: 50.42px; }
.html-body .text-2 { width: 72.02px; }

/* Counter / crontab badge */
.html-body .text-3 { width: 39.33px;  height: 16px; color: var(--c-yellow); font-size: 12px; line-height: 16px; white-space: nowrap; }
.html-body .text-4 { width: 39.25px;  height: 32px; color: var(--c-yellow); font-size: 24px; line-height: 32px; white-space: nowrap; }
.html-body .text-5 { width: 253.06px; height: 32px; color: var(--c-dk);     font-size: 24px; line-height: 32px; white-space: nowrap; }
.html-body .text-6 { max-width: 100%; width: auto; min-height: 56px; color: #27272a; font-size: 18px; line-height: 28px; }

/* Location */
.html-body .text-7 { width: 278.45px; height: 24px; color: var(--c-text); font-size: 16px; line-height: 24px; white-space: nowrap; }
.html-body .text-8 { width: 182.44px; height: 24px; color: var(--c-text); font-size: 16px; line-height: 24px; white-space: nowrap; }

/* Footer mono */
.html-body .text-9  { width: 97.22px;  height: 28px; color: var(--c-yellow); font-size: 18px; line-height: 28px; white-space: nowrap; }
.html-body .text-10 { width: 310.84px; height: 16px; color: var(--c-dim); font-size: 12px; letter-spacing: 1.2px; line-height: 16px; white-space: nowrap; }
.html-body .text-11 { width: 50.42px;  height: 16px; color: var(--c-dim); font-size: 12px; letter-spacing: 1.2px; line-height: 16px; white-space: nowrap; }
.html-body .text-12 { width: 58.81px;  height: 16px; color: var(--c-dim); font-size: 12px; letter-spacing: 1.2px; line-height: 16px; white-space: nowrap; }
.html-body .text-13 { width: 108.03px; height: 15px; color: var(--c-dim); font-size: 10px; line-height: 15px; white-space: nowrap; }

/* Nav links */
.html-body .text-14,
.html-body .text-15,
.html-body .text-16 {
  justify-content: center;
}
.html-body .text-14 { width: 69.31px;  color: #71717a; }
.html-body .text-15 { width: 77.02px;  color: #71717a; }
.html-body .text-16 { width: 123.23px; color: #71717a; }
.html-body .menu-option:hover .text-14,
.html-body .menu-option:hover .text-15,
.html-body .menu-option:hover .text-16 { color: var(--c-yellow); }

/* ── Imágenes / iconos ──────────────────────────────────── */
.html-body .tux-svg        { position: relative; width: 228px;   height: 270px;  aspect-ratio: .84;  object-fit: cover; }
.html-body .gluch-neon-capa{ position: relative; width: 423px;   height: 175px;  aspect-ratio: 2.42; object-fit: cover; }
.html-body .icon           { position: relative; width: 100px; height: 100px; font-size: 100px; line-height: 1; }
.html-body .icon-2         { position: relative; width: 18px;    height: 18px; color: var(--c-yellow);}
.html-body .icon-3         { position: relative; width: 30px;    height: 30px; }
.html-body .icon-4         { position: relative; width: 36px;    height: 18px; }
.html-body .icon-5         { position: relative; width: 25.5px;  height: 25.5px; }
.html-body .icon-6         { position: relative; width: 8px;     height: 10px; }
.html-body .icon-7,
.html-body .icon-8 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 1;
  color: #71717a;
}
.html-body .img            { position: relative; width: 16px;    height: 20px; }

/* ── Header / Hero ─────────────────────────────────────── */
.html-body .header-hero-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; padding: 20px 24px;
  margin-top: 61px;
  background-color: #0d0f0f; border-bottom: 1px solid var(--c-border);
}
.html-body .gradient {
  position: absolute; width: 100%; height: calc(100% - 1px); top: 0; left: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.1) 50%);
  opacity: .1;
}
.html-body .background-border {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 1514px; padding: 32px 16px; flex: 0 0 auto; position: relative;
  background-color: var(--c-surface);
  border: 1px solid var(--c-yellow); box-shadow: 0 0 10px #10b98133;
}
.html-body .heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 24px;
  align-self: stretch; width: 100%; flex: 0 0 auto;
}

/* ── Main content ───────────────────────────────────────── */
.html-body .main-content {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 80%;
  margin-inline: auto;
  gap: clamp(64px, 10vw, 128px);
  padding: clamp(48px, 8vw, 96px) 10%;
  box-sizing: border-box;
}

.html-body .main-content > * {
  min-width: 0;
  max-width: 100%;
}
.html-body .section-man-gluch {
  display: flex; align-items: center; gap: 48px;
  align-self: stretch; width: 100%; flex: 0 0 auto;
}

/* ── Blur / map placeholder ────────────────────────────── */
.html-body .overlay-blur {
  position: absolute;
  width: calc(100% + 16px); height: calc(100% + 16px);
  top: -8px; left: -8px;
  background-color: #f1e3a933; filter: blur(12px); opacity: 0;
}
.html-body .technical {
  position: relative; align-self: stretch; width: 100%;
  border-radius: 4px; border: 1px solid var(--c-border);
  aspect-ratio: 1.78; background: #fff;
}

/* ── Crontab section internals ─────────────────────────── */
.html-body .container-4 {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: 768px; gap: 16px;
  flex: 0 0 auto;
}
.html-body .background-border-2 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 80px; height: 80px; position: relative;
  background-color: #18181b; border-radius: 4px; border: 2px solid var(--c-border);
}
.html-body .container-8 {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: 102px; height: fit-content; gap: 16px; padding-top: 32px;
}
.html-body .overlay-border,
.html-body .overlay-border-2 {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; height: fit-content; gap: 4px; padding: 24px; position: relative;
  background-color: #09090b0d; border-radius: 4px; border: 1px solid #09090b33;
}
.html-body .overlay-border   { grid-row: 1/2; grid-column: 1/2; }
.html-body .overlay-border-2 { grid-row: 1/2; grid-column: 2/3; }

/* ── Whereis section ───────────────────────────────────── */
.html-body .section-whereis {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows: 400px; height: fit-content; gap: 48px;
}
.html-body .meeting-location-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  grid-row: 1/2; grid-column: 1/8; width: 100%; height: 400px; position: relative;
  background-color: #282a2b; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border);
}
.html-body .meeting-location {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  opacity: 1;
}
.html-body .container-9 {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  grid-row: 1/2; grid-column: 8/13; width: 100%; height: fit-content;
  padding: 6.8px 0 6.81px; position: relative;
}
.html-body .border {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  align-self: stretch; width: 100%; flex: 0 0 auto;
  border: 1px solid var(--c-border);
}
.html-body a.border {
  text-decoration: none;
  color: inherit;
}
.html-body a.border:hover {
  border-color: var(--c-accent, #7ee787);
}

/* ── Bento cards ───────────────────────────────────────── */
.html-body .terminal-card-bento {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: 198px; height: fit-content; gap: 24px;
}
.html-body .background-border-3,
.html-body .background-border-4,
.html-body .background-border-5 {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; padding: 32px; position: relative;
  width: 100%; height: fit-content;
  background-color: var(--c-surface); border: 1px solid var(--c-border);
}
.html-body .background-border-3 { grid-row: 1/2; grid-column: 1/2; }
.html-body .background-border-4 { grid-row: 1/2; grid-column: 2/3; }
.html-body .background-border-5 { grid-row: 1/2; grid-column: 3/4; }

/* ── Footer ────────────────────────────────────────────── */
.html-body .footer {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; padding: 0 clamp(16px, 4vw, 40px);
  background-color: var(--c-dk); border-top: 1px solid var(--c-border-d);
}
.html-body .container-11 {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 32px); flex: 0 0 auto;
}

/* ── Top nav ────────────────────────────────────────────── */
.html-body .top-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  width: 100%; padding: 16px clamp(16px, 4vw, 24px);
  position: fixed; top: 0; left: 0; z-index: 100;
  background-color: #09090be6; border-bottom: 1px solid var(--c-border-d);
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .html-body .section-man-gluch {
    flex-direction: column; align-items: stretch;
  }
  .html-body .section-whereis {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
  }
  .html-body .meeting-location-wrapper,
  .html-body .container-9 {
    grid-row: auto; grid-column: auto;
    height: auto; min-height: 280px;
  }
  .html-body .terminal-card-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .html-body .background-border-5 {
    grid-column: 1 / -1;
  }
  .html-body .container-8 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .html-body .overlay-border,
  .html-body .overlay-border-2 {
    grid-row: auto; grid-column: auto;
  }
}

@media (max-width: 768px) {
  .html-body .header-hero-section { padding: 16px; }
  .html-body .section-crontab-l { padding: clamp(24px, 6vw, 80px); }
  .html-body .container-5 { flex-direction: column; }
  .html-body .terminal-card-bento {
    grid-template-columns: 1fr;
  }
  .html-body .background-border-3,
  .html-body .background-border-4,
  .html-body .background-border-5 {
    grid-row: auto; grid-column: auto;
  }
  .html-body .container-11,
  .html-body .container-12 {
    flex-direction: column; align-items: flex-start; gap: 24px;
  }
  .html-body .container-14 { flex-wrap: wrap; gap: 16px; }
  .html-body .tux-svg { width: min(228px, 60vw); height: auto; }
  .html-body .gluch-neon-capa { width: min(423px, 90vw); height: auto; }
  .html-body [class^="text-"],
  .html-body [class*=" text-"],
  .html-body .text-wrapper-10 {
    white-space: normal; width: auto; max-width: 100%;
  }
}

@media (max-width: 480px) {
  .html-body .container-15 { display: none; }
  .html-body .icon-wrapper { display: none; }
}