/* =====================================================================
   DALPGIS · Portfolio — puente entre MkDocs Material y dalpgis.css
   ===================================================================== */

/* ---- Fuentes de marca alojadas en el sitio ---- */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---- Paleta de Material con los colores de marca ---- */
:root, [data-md-color-scheme="default"] {
  --md-primary-fg-color: #07225F;
  --md-primary-fg-color--light: #0E3282;
  --md-primary-fg-color--dark: #04153A;
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--dg-gold-600);
  --md-typeset-a-color: #0E3282;
  --md-text-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, monospace;
}
/* Tema claro elegido en el sitio: ignora la preferencia oscura del sistema que aplica dalpgis.css */
[data-md-color-scheme="default"] {
  --dg-bg: #F5F7FB; --dg-surface: #FFFFFF; --dg-surface-2: #EEF2F8; --dg-line: #DCE2EE;
  --dg-heading: #07225F; --dg-text: #26324D; --dg-muted: #4A5875; --dg-ink: #0E1730; --dg-link: #0E3282;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #04153A;
  --md-primary-fg-color--dark: #030D24;
  --md-accent-fg-color: var(--dg-gold);
  --md-default-bg-color: #030D24;
  --md-default-fg-color: #D5DDEE;
  --md-typeset-a-color: #F0D24A;
  --dg-surface: #071A44; --dg-surface-2: #0B2356; --dg-line: #1B3266;
  --dg-heading: #FFFFFF; --dg-text: #D5DDEE; --dg-muted: #9AA9C7; --dg-ink: #F3F6FC;
}
/* dalpgis.css define body/bg propios: dejamos que Material mande */
body { background: var(--md-default-bg-color); color: inherit; }
body, input, .md-typeset { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.dg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.md-typeset { font-size: .82rem; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Montserrat", system-ui, sans-serif; color: var(--dg-heading); letter-spacing: -.01em;
}
.md-typeset h1 { font-weight: 900; }
.md-typeset h2 { font-weight: 800; }
.md-typeset h2::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .4em; background: var(--dg-gold); border-radius: 2px; }
.md-typeset .dg-cta h2::after { margin-left: 0; }

/* ---- Cabecera y pestañas ---- */
.md-header { background: #07225F; box-shadow: 0 1px 0 rgba(229,192,11,.6); }
.md-header__button.md-logo img { height: 2rem; width: auto; }
.md-header__topic:first-child { display: none; }     /* el logo ya dice DALPGIS */
.md-tabs { background: #07225F; }
.md-tabs__link, .md-tabs__link:hover { font-family: "Montserrat", sans-serif; font-weight: 700; color: #fff; opacity: .85; }
.md-tabs__link:hover { color: var(--dg-gold); opacity: 1; }
.md-tabs__item--active .md-tabs__link { color: var(--dg-gold); opacity: 1; }
.md-footer { background: #04153A; }
.md-footer-meta { background: #030D24; }
.md-copyright { font-family: "Montserrat", sans-serif; letter-spacing: .04em; }

/* ---- Utilidades de texto ---- */
.md-typeset .dg-kicker { font: 700 .66rem/1.3 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .22em; color: var(--dg-gold-600); margin: 0 0 .6rem; }
[data-md-color-scheme="slate"] .md-typeset .dg-kicker, .dg-on-navy .dg-kicker { color: var(--dg-gold) !important; }
.md-typeset .dg-lead { font-size: 1.05rem; color: var(--dg-muted); max-width: 62ch; }
.md-typeset .dg-btn { font-size: .7rem; }
.md-typeset .dg-btn--gold, .md-typeset .dg-btn--gold:hover { color: #04153A; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2rem 0 0; }
.dg-empty { color: var(--dg-muted); font-style: italic; }

/* ---- Hero del inicio ---- */
.dg-home-hero { position: relative; overflow: hidden; background: #07225F; color: #DCE4F5; }
.dg-home-hero__art { position: absolute; inset: 0; background-size: cover; background-position: right center; opacity: .9; }
.dg-home-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #07225F 30%, rgba(7,34,95,.65) 60%, rgba(7,34,95,.15)); }
.dg-home-hero__in { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center; padding: 4.5rem .8rem 4.8rem; }
.dg-home-hero h1 { font: 900 clamp(1.9rem, 4vw, 2.9rem)/1.1 "Montserrat", sans-serif; color: #fff; margin: 0; max-width: 20ch; }
.dg-home-hero .dg-lead { color: #C9D4EC; font-size: 1.05rem; margin-top: 1.1rem; max-width: 56ch; }
.dg-home-hero .dg-kicker { font: 700 .7rem/1.3 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .22em; }
.dg-home-hero .dg-btn--ghost { color: #fff; }
.dg-home-hero__me { justify-self: end; text-align: center; background: rgba(4,21,58,.72); border: 1px solid rgba(229,192,11,.45); border-radius: 18px; padding: 1.4rem 1.6rem; backdrop-filter: blur(4px); }
.dg-home-hero__me img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 4px solid var(--dg-gold); background: #04153A; }
.dg-home-hero__me p { margin: .8rem 0 0; color: #DCE4F5; font-size: .8rem; line-height: 1.5; }
.dg-home-hero__me strong { font-family: "Montserrat", sans-serif; font-size: 1rem; color: #fff; }
.dg-home-hero__me span { color: var(--dg-gold); font-weight: 600; }
@media (max-width: 760px) {
  .dg-home-hero__in { grid-template-columns: 1fr; padding: 3rem .8rem; }
  .dg-home-hero__me { justify-self: start; display: flex; gap: 1rem; align-items: center; text-align: left; padding: 1rem; }
  .dg-home-hero__me img { width: 72px; height: 72px; }
  .dg-home-hero__me p { margin: 0; }
}

/* Entrada del héroe: cada bloque aparece con un pequeño fundido + deslizamiento, en cascada */
.dg-pop-in { opacity: 0; transform: translateY(16px); animation: dg-pop-in .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes dg-pop-in { to { opacity: 1; transform: none; } }
.dg-home-hero__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); opacity: .75; }
.dg-home-hero__scroll span { display: block; width: 10px; height: 10px; border-right: 2px solid var(--dg-gold); border-bottom: 2px solid var(--dg-gold); transform: rotate(45deg); animation: dg-bounce 1.8s ease-in-out infinite; }
@keyframes dg-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(6px, 6px); } }

/* Aparece suavemente al hacer scroll (lo activa portfolio.js con la clase .is-in) */
.dg-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.dg-reveal.is-in { opacity: 1; transform: none; }

/* ---- KPIs automáticos ---- */
.dg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 1.5rem 0 2rem; }
.md-typeset .dg-kpi { background: var(--dg-surface); }
.md-typeset .dg-kpi__val { font-size: 1.9rem; }
/* Franja de cifras "flotando" sobre el borde inferior del mapa (ver .dg-map-stage) */
.dg-stats-dock { position: relative; z-index: 2; margin-top: -2.6rem; padding: 0 .4rem; }
@media (max-width: 760px) { .dg-stats-dock { margin-top: -1.6rem; } }

/* ---- Mapa de proyectos: la pieza central del inicio ---- */
.dg-map-stage { margin: 0 0 1rem; padding: 2.4rem 1.6rem 3.6rem; border-radius: 22px; text-align: center; }
.dg-map-stage__in { max-width: var(--dg-max, 1120px); margin: 0 auto; }
.dg-map-stage .dg-kicker { justify-content: center; }
.dg-map-stage h2 { margin: 0 auto 1.4rem; max-width: 46ch; }
.dg-map-stage h2::after { margin-left: auto; margin-right: auto; }
.dg-mapwrap { position: relative; margin: 0; text-align: left; }
#dg-map { display: block; height: var(--dg-map-h, 620px); min-height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 0; }
@media (max-width: 760px) { .dg-map-stage { padding: 2rem 1rem 3rem; } #dg-map { height: min(60vh, 460px); } }
.dg-maphint { position: absolute; left: 14px; bottom: 28px; z-index: 500; margin: 0; font: 700 .6rem "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; background: #07225F; color: var(--dg-gold); padding: .45em .9em; border-radius: 999px; }
.dg-pop { width: 230px; font-family: "Inter", sans-serif; }
.dg-pop img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.dg-pop small { display: block; margin-top: .5em; font: 700 .58rem "Montserrat", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dg-gold-600); }
.dg-pop b { display: block; font: 800 .85rem/1.25 "Montserrat", sans-serif; color: #07225F; margin: .2em 0; }
.dg-pop p { margin: 0 0 .5em !important; font-size: .75rem; color: #4A5875; }
.dg-pop a { font: 800 .65rem "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #07225F !important; }
.dg-pop a:hover { text-decoration: underline; }
.dg-mapcard { position: absolute; top: 44px; right: 14px; z-index: 600; padding: 12px; background: #fff; border-radius: 12px; border-top: 4px solid var(--dg-gold); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dg-mapcard[hidden] { display: none; }
.dg-mapcard__x { position: absolute; top: 4px; right: 8px; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: #4A5875; }
[data-md-color-scheme="slate"] .dg-mapcard { background: #0B1A3D; }
[data-md-color-scheme="slate"] .dg-mapcard__x { color: #C9D3E8; }
@media (max-width: 600px) { .dg-mapcard { left: 10px; right: 10px; top: auto; bottom: 40px; } .dg-mapcard .dg-pop { width: auto; } }
/* Popup del mapa ArcGIS en tema oscuro */
[data-md-color-scheme="slate"] .dg-pop b,
[data-md-color-scheme="slate"] .dg-pop a { color: var(--dg-gold) !important; }
[data-md-color-scheme="slate"] .dg-pop p { color: #C9D3E8; }
[data-md-color-scheme="slate"] .dg-pop small { color: var(--dg-gold); }

/* ---- Tarjetas de servicio ---- */
.dg-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 1rem 0 2rem; }
.md-typeset a.dg-scard { display: block; background: var(--dg-surface); border: 1px solid var(--dg-line); border-top: 4px solid #07225F; border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; color: var(--dg-text); transition: transform .15s, border-color .15s, box-shadow .15s; }
.md-typeset a.dg-scard:hover { transform: translateY(-3px); border-top-color: var(--dg-gold); box-shadow: var(--dg-shadow-lg); }
.dg-scard__icon { font-size: 1.5rem; }
.md-typeset .dg-scard h3 { font-size: .9rem; margin: .4rem 0 .3rem; }
.dg-scard__n { font: 700 .6rem "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-muted); }

/* ---- Tarjetas de proyecto ---- */
.dg-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 1rem 0 2rem; }
.md-typeset a.dg-pcard { display: flex; flex-direction: column; background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--dg-text); box-shadow: var(--dg-shadow); transition: transform .18s, box-shadow .18s; }
.md-typeset a.dg-pcard:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow-lg); }
.dg-pcard__img { position: relative; aspect-ratio: 16/9; background: #07225F; overflow: hidden; }
.dg-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
a.dg-pcard:hover .dg-pcard__img img { transform: scale(1.05); }
.dg-star, .dg-draft { position: absolute; top: 10px; left: 10px; font: 800 .55rem "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: .45em .8em; border-radius: 999px; background: var(--dg-gold); color: #04153A; }
.dg-draft { left: auto; right: 10px; background: #C8553D; color: #fff; }
.dg-pcard__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.md-typeset .dg-pcard h3 { font-size: .95rem; line-height: 1.25; margin: 0 0 .4rem; }
.md-typeset .dg-pcard p { font-size: .76rem; margin: 0 0 .7rem; }
.md-typeset .dg-pcard .dg-kicker { font-size: .56rem; margin-bottom: .35rem; }
.dg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dg-tags span { font: 600 .6rem "Inter", sans-serif; background: var(--dg-navy-100); color: #07225F; padding: .3em .65em; border-radius: 6px; }
[data-md-color-scheme="slate"] .dg-tags span { background: #0B2356; color: #DCE4F5; }
.dg-tags--lg span { font-size: .68rem; }
.dg-pcard.is-hidden { display: none; }

/* ---- Filtros ---- */
.dg-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 1rem 0; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-chip { cursor: pointer; font: 700 .62rem "Montserrat", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .6em 1em; border-radius: 999px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); color: var(--dg-heading); }
.dg-chip:hover { border-color: var(--dg-gold); }
.dg-chip.is-on { background: #07225F; border-color: #07225F; color: #fff; }
.dg-selects { display: flex; gap: 8px; }
.dg-select { font: 500 .72rem "Inter", sans-serif; padding: .5em .8em; border-radius: 8px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); color: var(--dg-text); }

/* ---- Página de proyecto ---- */
.dg-phero h1 { margin-bottom: .2rem; }
.dg-phero__img { width: 100%; border-radius: 16px; margin: 1.2rem 0 1rem; box-shadow: var(--dg-shadow-lg); }
.dg-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 1rem; }
.dg-meta > div { background: var(--dg-surface); border: 1px solid var(--dg-line); border-left: 4px solid var(--dg-gold); border-radius: 10px; padding: .55rem .8rem; }
.md-typeset .dg-meta dt { font: 700 .55rem "Montserrat", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-muted); }
.md-typeset .dg-meta dd { margin: .15rem 0 0; font-weight: 600; font-size: .78rem; color: var(--dg-heading); }
.md-typeset .dg-result { font-weight: 600; }

/* ---- CTA final ---- */
.md-typeset .dg-cta { margin: 3rem 0 1rem; padding: 2rem 2rem 2.2rem; border-radius: 18px; position: relative; overflow: hidden; }
.md-typeset .dg-cta h2 { color: #fff; margin-top: 0; }
.md-typeset .dg-cta p { color: #C9D4EC; }
.md-typeset .dg-cta .dg-btn--ghost { color: #fff; }
.md-typeset .dg-cta > * { position: relative; z-index: 1; }
.md-typeset .dg-cta::after { content: ""; position: absolute; right: -150px; bottom: -190px; width: 300px; height: 300px; opacity: .85; border: 16px solid var(--dg-gold); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(20deg); pointer-events: none; }

/* ---- Galería ---- */
.dg-gallery { columns: 3 260px; column-gap: 16px; margin: 1rem 0; }
.dg-gitem { break-inside: avoid; margin: 0 0 16px; background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: 14px; overflow: hidden; }
.dg-gitem img { width: 100%; display: block; }
.dg-gitem figcaption { padding: .7rem .9rem; font-size: .72rem; text-align: left; }
.dg-gitem figcaption strong { display: block; font-family: "Montserrat", sans-serif; color: var(--dg-heading); }
.dg-gitem a { text-decoration: none; color: inherit; }

.md-typeset a.dg-btn--navy, .md-typeset a.dg-btn--navy:hover { color: #fff; }
.md-typeset a.dg-btn--ghost { color: inherit; }

/* Quien pidió "menos movimiento" al sistema operativo lo ve todo de una vez, sin animar */
@media (prefers-reduced-motion: reduce) {
  .dg-pop-in { animation: none; opacity: 1; transform: none; }
  .dg-reveal { opacity: 1; transform: none; transition: none; }
  .dg-home-hero__scroll span { animation: none; }
}