/* ============================================================
   OVERRIDES DE MÓDULO
   Se carga con <link> al final del <body>: gana por orden de cascada
   a los <style> que cada módulo inyecta al final del <head> (§7.3).
   Se conserva !important donde el brief lo pide explícitamente.
   mis-skills.js NO se toca (§9).
   ============================================================ */

/* ---------- §1 · Override tipográfico -----------------------
   Varios módulos hardcodean su propia familia (Inter / Geist /
   Bricolage Grotesque / -apple-system). Se unifica a la de marca. */
.ms-neoncard-host, .ms-datacards-poster, .ms-diagcarousel-root,
.ms-glassnav-root {
  font-family: var(--dl-font-body) !important;
}
.ms-neoncard, .ms-glassnav, .ms-bento-root {
  font-family: var(--dl-font-body) !important;
}
/* Las tipografías mono del módulo de método pasan a la mono de marca */
.ms-datacards-label-tile .ms-dc-lbl,
.ms-datacards-tools-tile .ms-dc-t,
.ms-datacards-tagline {
  font-family: var(--dl-font-mono) !important;
}
/* glassHeroScene recibe la fuente por parámetro (dibuja en <canvas>), no por CSS. */

/* ---------- §4.1 · glassyNav -------------------------------- */
.ms-glassnav-root {
  /* el fondo lo aporta el hero: el nav sólo aporta el vidrio */
  --glass-bg: rgba(23, 19, 16, 0.55);
  --pill-bg: rgba(60, 52, 44, .85);
  --icon-active: var(--dl-accent-soft);
}
.ms-glassnav-btn { font-family: inherit; font-weight: 600; }
@media (max-width: 420px) {
  .ms-glassnav-btn { padding: 0 12px; font-size: 13px; }
  .ms-glassnav-btn-content span { display: none; }   /* sólo iconos en pantallas muy angostas */
}

/* ---------- §4.2 · glassHeroScene --------------------------- */
/* El host del módulo es `position: relative; height: 100%`. Dentro de la
   fila 1fr del hero conviene sacarlo del flujo para que no compita con el
   fallback ni arrastre el alto de la fila. */
.hero-canvas .ms-glasshero-host {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* ---------- §4.3 · dataCardsMenu ---------------------------- */
.ms-datacards-poster {
  background: radial-gradient(120% 70% at 50% 0%, #221c15 0%, #150f0a 60%, var(--dl-bg) 100%) !important;
  --ms-dc-ink: var(--dl-ink);
  --ms-dc-mute: var(--dl-ink-mute);
  --ms-dc-accent: var(--dl-accent);
  --ms-dc-hairline: rgba(244,241,234,0.12);
}
.ms-datacards-top-divider .ms-dc-dot { background: var(--dl-accent) !important; }
.ms-datacards-tagline { color: var(--dl-ink-mute) !important; }
/* la píldora crema del original mantiene el contraste sobre el fondo oscuro */
.ms-datacards-pill {
  box-shadow: 0 36px 60px -22px rgba(0,0,0,.72),
              0 18px 30px -10px rgba(0,0,0,.5),
              inset 0 2px 0 rgba(255,255,255,.95),
              inset 0 -3px 5px rgba(60,50,30,.2) !important;
}
@media (max-width: 860px) {
  .ms-datacards-poster { min-height: 70vh !important; }
}

/* Cita-principio (§49 del Manual) inyectada en main.js justo después de
   cada píldora — dataCardsMenu no acepta contenido propio por pill (§9,
   no se toca la librería), así que se añade como hermano en el DOM. */
.ms-dc-principle {
  /* .ms-datacards-pill es flex sin wrap explícito en su dirección; esto la
     fuerza a su propia fila completa debajo de las dos tiles oscuras */
  flex: 1 1 100%;
  margin: 4px 4px 0;
  font-family: var(--dl-font-body);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  max-width: 52ch;
  /* la píldora se queda crema/clara a propósito (contraste sobre el poster
     oscuro): --dl-ink-mute es claro, pensado para fondos oscuros, y aquí
     leería casi invisible. #4a4038 da 5.7:1 incluso contra el stop más
     oscuro del degradado de la píldora. */
  color: #4a4038;
}

/* ---------- §4.4 · neonGlassCard + neonGlass3DTilt ---------- */

/* 28° deforma la lectura de pantalla dentro de un contenedor con video */
.ms-ux-parent:hover .ms-ux-card { transform: rotate3d(1, 1, 0, 7deg); }

/* la sombra verde del lab original pasa a una sombra neutra: sin glow de
   color, sólo más profundidad al hover */
.ms-ux-parent { filter: none; }
.ms-ux-card {
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.ms-ux-parent:hover .ms-ux-card {
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.82);
}

/* .ms-neoncard trae width:390px / min-height:540px fijos */
.work-card, .contact-card {
  width: 100% !important;
  min-height: 0 !important;
  padding: 18px !important;
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
}
/* .ms-neoncard trae `max-width: 100%` y se inyecta después de layout.css:
   el ancho de la tarjeta de contacto hay que fijarlo aquí. */
.contact-card {
  padding: clamp(24px, 5vw, 40px) !important;
  max-width: 760px;
}

.ms-neoncard-badge {
  /* --dl-accent puro falla AA a 11px sobre el fondo casi negro de la
     tarjeta; la variante clara sí pasa */
  color: var(--dl-accent-soft);
  background: color-mix(in srgb, var(--dl-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--dl-accent) 28%, transparent);
  font-family: var(--dl-font-mono);
}
.ms-neoncard-badge-dot {
  background: var(--dl-accent);
  box-shadow: none;
}
.ms-neoncard-button {
  background: var(--dl-accent);
  color: var(--dl-on-accent);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.6);
  font-family: var(--dl-font-body);
  transition: background-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.ms-neoncard-button:hover {
  background: var(--dl-accent-soft);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.65);
}
/* borde fino de una sola pieza en vez del foil bicolor original */
.ms-neoncard::before {
  background: rgba(244,241,234,0.14);
}
/* el blob decorativo del original vivía del segundo acento: sin él, se retira */
.ms-neoncard::after { display: none; }

/* ---------- §4.6 · bentoDataHero ---------------------------- */
.ms-bento-root { color: var(--dl-ink); }
.ms-bento-tab {
  background: var(--dl-glass-bg);
  color: var(--dl-ink-mute);
  border: 1px solid var(--dl-glass-border);
}
.ms-bento-tab.is-active {
  background: var(--dl-accent);
  color: var(--dl-on-accent);
  border-color: transparent;
}
.ms-bento-headline {
  font-family: var(--dl-font-display);
  letter-spacing: -0.03em;
}
.ms-bento-subtitle { color: var(--dl-ink-mute); }
.ms-bento-card, .ms-bento-services {
  background: var(--dl-bg-elev);
  border: 1px solid var(--dl-glass-border);
}
.ms-bento-card-title { color: var(--dl-ink); }
.ms-bento-tag {
  background: color-mix(in srgb, var(--dl-accent) 16%, transparent);
  color: var(--dl-ink);
  border: 1px solid color-mix(in srgb, var(--dl-accent) 34%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.ms-bento-tag.is-white {
  background: var(--dl-ink);
  color: var(--dl-bg);
  border-color: transparent;
}
/* Sin stats ni testimonios el módulo no renderiza esas dos celdas (§4.6):
   queda sólo la nube de etiquetas. Se le acota el ancho porque los slots
   del módulo son porcentuales y en una caja de 1080px se apelotonan a la
   izquierda dejando el tercio derecho vacío. */
.ms-bento-grid { grid-template-columns: minmax(0, 680px); }
.ms-bento-tags-container { height: 230px; }

/* ---------- Movimiento reducido (§8) ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ms-ux-parent:hover .ms-ux-card { transform: none !important; }
  .ms-datacards-pill { animation: none !important; }
}

/* ---------- Sin hover fino: nada de tilt (§4.4) ------------- */
@media (hover: none), (max-width: 860px) {
  .ms-ux-parent:hover .ms-ux-card { transform: none; }
}

/* ---------- Fluidez en móvil -------------------------------- */
/* .ms-neoncard (tarjetas de trabajo + contacto) y .ms-glassnav (nav) traen
   su blur fijo en el CSS que inyecta la librería (24px y 50px): se pisa
   por cascada, sin tocar mis-skills.js (§9). En móvil, con varias tarjetas
   de vidrio entrando y saliendo de pantalla al hacer scroll, un blur más
   chico compone más liviano y se sigue viendo como vidrio esmerilado. */
@media (max-width: 767px) {
  .ms-neoncard {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .ms-glassnav {
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
}