/* ============================================================================
   podeley.ar — extra.css
   1) Self-hosted fonts   2) --pd-* design tokens (light-only)
   3) Material chrome bridge (the ~80-line "override")   4) Page components
   Ported from the approved v2 design (custom static build).
   ============================================================================ */

/* ---------- 1. Fonts (latin subset, OFL; Sans & Grotesk are variable) ------ */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-500.woff2") format("woff2")}

/* ---------- 2. Tokens (light-only) ----------------------------------------- */
:root{
  --pd-blue:#4EA8DE; --pd-orange:#FF7B54; --pd-green:#43C59E; --pd-gold:#F2C14E;
  --pd-blue-ink:#1f6a9b; --pd-orange-ink:#c24b22; --pd-green-ink:#147a5f; --pd-gold-ink:#8a6412;
  --pd-bg:#ffffff; --pd-surface-2:#f6f7f8;
  --pd-border:#d9dce0; --pd-border-soft:#e8eaed;
  --pd-text:#16181d; --pd-text-muted:#4a5361; --pd-text-faint:#6b7280;
  --pd-primary:var(--pd-orange-ink); --pd-link:var(--pd-orange-ink); --pd-focus:var(--pd-orange-ink);
  --pd-caveat:var(--pd-gold-ink);
  --pd-btn-primary-bg:var(--pd-orange-ink); --pd-btn-primary-fg:#ffffff;
  --pd-font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --pd-font-body:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --pd-font-mono:"IBM Plex Mono",ui-monospace,"Roboto Mono",Menlo,monospace;
  --pd-fs-h1:clamp(2rem,1.4rem + 3.2vw,3.1rem);
  --pd-fs-h2:clamp(1.5rem,1.2rem + 1.6vw,2rem);
  --pd-fs-h3:clamp(1.08rem,1rem + .5vw,1.28rem);
  --pd-fs-lead:clamp(1.02rem,.98rem + .4vw,1.18rem);
  --pd-fs-sm:.875rem; --pd-fs-cap:.72rem;
  --pd-lh-tight:1.14; --pd-lh-body:1.62;
  --pd-r-1:.35rem; --pd-r-2:.6rem; --pd-r-pill:999px;
  --pd-section:clamp(3.4rem,7vw,6rem);
  --pd-rule:110,116,128; --pd-rule-alpha:.18;
  --pd-dur:200ms;
  /* the measurement-field motif (divider) */
  --pd-field:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2220%22%20viewBox%3D%220%200%20132%2020%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%221.1%22%20y1%3D%229.6%22%20x2%3D%2213.5%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%2216.0%22%20y1%3D%228.4%22%20x2%3D%2228.0%22%20y2%3D%2211.6%22%2F%3E%3Cline%20x1%3D%2230.6%22%20y1%3D%228.7%22%20x2%3D%2242.7%22%20y2%3D%2211.3%22%2F%3E%3Cline%20x1%3D%2245.1%22%20y1%3D%2210.3%22%20x2%3D%2257.5%22%20y2%3D%229.7%22%2F%3E%3Cline%20x1%3D%2260.1%22%20y1%3D%2212.0%22%20x2%3D%2271.9%22%20y2%3D%228.0%22%2F%3E%3Cline%20x1%3D%2275.0%22%20y1%3D%2212.5%22%20x2%3D%2286.3%22%20y2%3D%227.5%22%2F%3E%3Cline%20x1%3D%2289.3%22%20y1%3D%2211.4%22%20x2%3D%22101.4%22%20y2%3D%228.6%22%2F%3E%3Cline%20x1%3D%22103.8%22%20y1%3D%229.6%22%20x2%3D%22116.2%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%22118.7%22%20y1%3D%228.4%22%20x2%3D%22130.6%22%20y2%3D%2211.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------- 3. Material chrome bridge -------------------------------------- */
/* Material sets html{font-size:125%} (1rem=20px). Reset to 16px so the token
   scale holds; re-anchor typeset text at 1rem. Material chrome shrinks ~20%,
   which suits the slim boutique look. */
html{font-size:100%}
.md-typeset{font-size:1rem;line-height:var(--pd-lh-body)}

body,.md-typeset{font-family:var(--pd-font-body);color:var(--pd-text)}
:root{
  --md-default-bg-color:var(--pd-bg);
  --md-default-fg-color:var(--pd-text);
  --md-typeset-color:var(--pd-text);
  --md-typeset-a-color:var(--pd-link);
  --md-accent-fg-color:var(--pd-link);
  --md-primary-fg-color:var(--pd-link);
}

/* header: white, hairline, dark text, display face */
.md-header{background:var(--pd-bg);color:var(--pd-text);box-shadow:none;border-bottom:1px solid var(--pd-border-soft)}
.md-header[data-md-state=shadow],.md-header--shadow{box-shadow:none}
.md-header__title{font-family:var(--pd-font-display);font-weight:500;font-size:.95rem;color:var(--pd-text)}
.md-header__button{color:var(--pd-text-muted)}
.md-header__button:hover{color:var(--pd-text)}
.md-header__button.md-logo img,.md-header__button.md-logo svg{height:1.35rem;width:1.35rem;border-radius:.32rem}
/* language selector (added by static-i18n + Material) */
.md-select button{color:var(--pd-text-muted)}
.md-select__inner{background:var(--pd-bg);border:1px solid var(--pd-border);box-shadow:0 6px 18px -8px rgba(15,23,42,.25);left:auto;right:0;transform:none}
/* the hidden dropdown must never widen the page (mobile) */
html{overflow-x:clip}
.md-select__item .md-select__link{color:var(--pd-text-muted)}
.md-select__item .md-select__link:hover{color:var(--pd-link)}

/* content container: wider, generous */
.md-grid{max-width:78rem}
.md-main__inner{margin-top:0}
.md-content{padding-bottom:0}
.md-content__inner{margin-bottom:0;padding-top:0}
.md-content__inner:before{display:none}
/* hidden sidebars leave a gap — collapse it */
.md-sidebar{display:none !important}
/* kill Material's "back to top", edit, etc. leftovers we don't use */
.md-top{display:none}

/* typeset defaults toward our design */
.md-typeset a{color:var(--pd-link)}
.md-typeset a:focus-visible{outline:2px solid var(--pd-focus);outline-offset:2px;border-radius:var(--pd-r-1)}
.md-typeset h1,.md-typeset h2,.md-typeset h3{font-family:var(--pd-font-display);font-weight:500;color:var(--pd-text);letter-spacing:-.01em}
.md-typeset h1{font-size:var(--pd-fs-h1);line-height:var(--pd-lh-tight);margin:.6em 0 .5em;max-width:24ch}
.md-typeset h2{font-size:var(--pd-fs-h2);line-height:1.16;margin:.8em 0 .4em}
.md-typeset h3{font-size:var(--pd-fs-h3);line-height:1.25}
::selection{background:color-mix(in srgb,var(--pd-orange) 28%,transparent)}

/* footer: replaced by overrides/partials/footer.html; style it */
.md-footer{background:var(--pd-bg);color:var(--pd-text-muted);border-top:1px solid var(--pd-border-soft)}
.pd-footer{max-width:78rem;margin:0 auto;padding:2rem 1.2rem 3rem;display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:center}
.pd-footer .brandline{display:inline-flex;align-items:center;gap:.5rem;color:var(--pd-text-muted);font-size:var(--pd-fs-sm)}
.pd-footer .brandline svg{width:20px;height:20px;border-radius:5px}
.pd-footer p{margin:0;font-family:var(--pd-font-mono);font-size:var(--pd-fs-cap);line-height:1.6;color:var(--pd-text-faint);max-width:60ch}
.pd-footer a{color:var(--pd-text-muted);text-decoration:none}
.pd-footer a:hover{color:var(--pd-text)}
.footer-map{letter-spacing:.03em}


/* ---------- 4. Ajustes para sitios de caso ---------------------------------- */
/* Estos son sitios didácticos, no el portfolio: se conserva la navegación y el
   índice de Material, que es lo que los hace legibles como documentación. */

/* `:not([hidden])` es obligatorio: Material implementa el `hide: [navigation, toc]`
   del front-matter poniendo el atributo `hidden` en el sidebar, y un
   `display:block !important` pelado se lo pisa y saca la navegación en las portadas. */
.md-sidebar:not([hidden]) { display: block !important; }
.md-nav__title { font-family: var(--pd-font-display); font-weight: 500; }
.md-nav__link--active { color: var(--pd-link); font-weight: 600; }

/* tablas: densas y legibles, que es la mitad del contenido de estos sitios */
.md-typeset table:not([class]) {
  font-size: var(--pd-fs-sm);
  border: 1px solid var(--pd-border-soft);
}
.md-typeset table:not([class]) th {
  background: var(--pd-surface-2);
  font-family: var(--pd-font-body);
  font-weight: 600;
  color: var(--pd-text);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--pd-border-soft); }

/* figuras e iframes: caja consistente y usable en teléfono */
.md-typeset img, .md-typeset iframe {
  border-radius: var(--pd-r-2);
  max-width: 100%;
}
.md-typeset iframe { border: 1px solid var(--pd-border-soft); }
@media (max-width: 760px) {
  .md-typeset iframe { min-height: 60vh; }
}

/* admoniciones al tono de la identidad, sin los colores de fábrica */
.md-typeset .admonition, .md-typeset details {
  border-radius: var(--pd-r-2);
  border-left-width: 3px;
  font-size: var(--pd-fs-sm);
  box-shadow: none;
  border: 1px solid var(--pd-border-soft);
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: var(--pd-font-body);
  font-weight: 600;
  background: var(--pd-surface-2);
}
/* Material pinta cada tipo de admonición con su color de fábrica y gana por
   especificidad (`.note > .admonition-title`), así que hay que igualarla para
   traerlas a los acentos de la identidad. */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.info, .md-typeset details.info { border-left-color: var(--pd-blue-ink); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary,
.md-typeset .info > .admonition-title, .md-typeset .info > summary {
  background: var(--pd-surface-2);
  color: var(--pd-blue-ink);
}
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before {
  background-color: var(--pd-blue-ink);
}
.md-typeset .admonition.warning, .md-typeset details.warning { border-left-color: var(--pd-caveat); }
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary {
  background: var(--pd-surface-2);
  color: var(--pd-caveat);
}
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before {
  background-color: var(--pd-caveat);
}

/* código: mono de la identidad */
.md-typeset code, .md-typeset pre { font-family: var(--pd-font-mono); }
.md-typeset pre > code { font-size: .8rem; }

/* la nota de corte de datos, para el pie de cada caso */
.md-typeset .datanote {
  border-left: 2px solid var(--pd-border);
  padding: .1rem 0 .1rem .9rem;
  font-family: var(--pd-font-mono);
  font-size: var(--pd-fs-cap);
  line-height: 1.7;
  color: var(--pd-text-faint);
  max-width: 68ch;
}
.md-typeset .datanote strong { color: var(--pd-text-muted); font-weight: 500; }

/* ---------- 5. Componentes de estos tres sitios ---------------------------- */
/* Portados del extra.css anterior a los tokens --pd-*. El degradé del h1 salió a
   propósito: la identidad usa Space Grotesk 500 en sólido. */

.hero { padding: 1.6rem 0 .4rem; }
.md-typeset .hero h1 { margin: 0 0 .5rem; }
.hero-sub {
  font-size: var(--pd-fs-lead);
  line-height: 1.55;
  color: var(--pd-text-muted);
  margin: .2rem 0 1.2rem;
  max-width: 70ch;
}

.hero-buttons { margin: .6rem 0 1.4rem; }
.hero-buttons .md-button { margin: 0 .45rem .55rem 0; }
.md-typeset .md-button {
  border-radius: var(--pd-r-1);
  border: 1px solid var(--pd-border);
  color: var(--pd-text);
  font-family: var(--pd-font-body);
  font-size: var(--pd-fs-sm);
  font-weight: 600;
  padding: .5em 1em;
  transition: color var(--pd-dur), background var(--pd-dur), border-color var(--pd-dur);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus-visible {
  background: var(--pd-surface-2);
  border-color: var(--pd-primary);
  color: var(--pd-primary);
}
.md-typeset .md-button--primary {
  background: var(--pd-btn-primary-bg);
  border-color: var(--pd-btn-primary-bg);
  color: var(--pd-btn-primary-fg);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus-visible {
  background: var(--pd-text);
  border-color: var(--pd-text);
  color: #fff;
}

.hero-gif img { width: 100%; border-radius: var(--pd-r-2); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem;
  margin: 1.2rem 0 1.4rem;
}
.stat {
  border: 1px solid var(--pd-border-soft);
  border-radius: var(--pd-r-2);
  padding: .9rem 1rem .8rem;
  background: var(--pd-surface-2);
}
.stat .n {
  display: block;
  font-family: var(--pd-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--pd-primary);
  font-variant-numeric: tabular-nums;
}
.stat .d {
  display: block;
  font-size: var(--pd-fs-cap);
  line-height: 1.5;
  color: var(--pd-text-muted);
  margin-top: .35rem;
}
.stat .n.accent-blue   { color: var(--pd-blue-ink); }
.stat .n.accent-orange { color: var(--pd-orange-ink); }
.stat .n.accent-green  { color: var(--pd-green-ink); }
.stat .n.accent-gold   { color: var(--pd-gold-ink); }

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
}