/* ============================================================
   Deepmapping — correcciones de presentación · agosto 2026
   ------------------------------------------------------------
   Esta hoja se carga LA ÚLTIMA a propósito. El sitio tiene cinco
   hojas que se pisan entre sí (styles, software, fancy, landing-base,
   landing-suite) y muchas reglas dependen del orden de carga. En vez
   de tocar cinco archivos y arriesgar regresiones invisibles, aquí
   van las correcciones, cada una con el motivo.

   Cuando haya tiempo, lo correcto es consolidar las cinco hojas en
   dos y borrar el código muerto. Mientras tanto, esto no rompe nada.
   ============================================================ */

/* ---------- 1. Los enlaces del menú caían debajo de la barra ----------
   La barra superior es fija y mide ~82 px. Sin scroll-padding, al pulsar
   "Filosofía" o "Software" el título de la sección quedaba escondido
   detrás de ella. Le pasaba a TODOS los enlaces internos del sitio. */
html {
  scroll-padding-top: 96px;
}

/* ---------- 2. La barra de versión estaba tapada ----------
   Va antes del <header> fijo, así que quedaba 100 % debajo de él: se veía
   solo como un fantasma borroso a través del desenfoque. Ahora se aparta. */
.dm-version-bar {
  margin-top: 86px;
}
@media (max-width: 980px) {
  .dm-version-bar { margin-top: 78px; }
}

/* ---------- 3. El foco del teclado era invisible ----------
   Los formularios declaraban `outline:none` con más especificidad que la
   regla global de foco, y solo quedaba una sombra al 15 % de opacidad,
   imperceptible. Quien navega con teclado no sabía dónde estaba parado.
   (WCAG 2.4.7 y 1.4.11.) */
.contact-form :is(input, select, textarea):focus-visible,
.software-form :is(input, select, textarea):focus-visible,
.auth-form :is(input, select, textarea):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cyan, #00B7E3) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ---------- 4. Contraste insuficiente en texto magenta ----------
   #E6007E sobre negro da 4.4:1 y no llega al mínimo de 4.5:1 para texto
   pequeño. El magenta se conserva para fondos, bordes y adornos —donde no
   aplica el requisito— y el texto pasa a un tono más claro (~6.5:1). */
:root { --magenta-texto: #FF3D9E; }
.project-status,
.overline.magenta,
.section small.magenta { color: var(--magenta-texto); }
.plan-badge { color: #12030A; }

/* ---------- 5. Hueco vacío en Proyectos ----------
   La rejilla pedía dos columnas (1.3fr .7fr) pero solo hay dos hijos y el
   primero ocupa el ancho completo: el 35 % derecho se quedaba en blanco. */
.project-expansion { grid-template-columns: 1fr; }

/* ---------- 6. Tarjetas con esquinas rotas ----------
   `.card` tenía radio de 18 px pero solo bordes derecho e inferior, dentro
   de un contenedor con bordes superior e izquierdo: las esquinas se veían
   cortadas. Se unifica a una sola gramática de tarjeta, con separación. */
.cards {
  gap: 16px;
  border-top: 0;
  border-left: 0;
}
.cards .card {
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 14px;
}

/* ---------- 7. La franja de especialidades se cortaba en silencio ----------
   Siete columnas de 190 px mínimo suman 1330 px dentro de un contenedor con
   overflow:hidden: entre 561 y 980 px desaparecían dos o tres especialidades
   sin ningún indicio de que hubiera más. */
.ticker {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.ticker span { scroll-snap-align: start; }

/* ---------- 8. Cita de la sección Filosofía ---------- */
.quote-figure { margin: 0; }
.quote-figure blockquote {
  margin: 0;
  border-left: 4px solid var(--cyan, #00B7E3);
  padding-left: clamp(16px, 2.4vw, 28px);
}
.quote-figure blockquote p {
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.quote-figure figcaption {
  margin-top: 18px;
  padding-left: clamp(20px, 2.4vw, 32px);
}
.quote-source {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--soft, rgba(242,242,242,.72));
}
.quote-note { margin-top: 12px; }
.quote-note > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan, #00B7E3);
  padding: 6px 0;
}
.quote-note > summary::marker { color: var(--cyan, #00B7E3); }
.quote-note[open] > summary { margin-bottom: 8px; }
.quote-note p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--soft, rgba(242,242,242,.72));
  margin: 0 0 10px;
  max-width: 62ch;
}
.quote-note cite { font-style: italic; }

/* ---------- 9. La misión no aparecía escrita en ningún sitio ----------
   "Democratizar el aprendizaje y el acceso a las tecnologías" es el eje del
   proyecto y no estaba en el texto de la página ni una sola vez. */
.mission-statement {
  margin: 34px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(0,183,227,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,183,227,.12), rgba(230,0,126,.06));
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.02em;
  max-width: 34ch;
}
.mission-statement > span {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan, #00B7E3);
  margin-bottom: 10px;
}

/* ---------- 10. Marca de agua "MUSAC" en lugar de una foto ----------
   El marcador de posición se leía como una maqueta a medio terminar en la
   sección de Talleres. Hasta que haya fotos reales, al menos se presenta
   como una pieza gráfica deliberada y se avisa de que es provisional. */
.workshop-photo-placeholder {
  font-family: Montserrat, Inter, sans-serif !important;
  position: relative;
}
.workshop-photo-placeholder::after {
  content: "Fotografía del taller · próximamente";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
  white-space: nowrap;
}

/* ---------- 11. Coherencia de botones ----------
   Tres definiciones distintas de `.button:hover` competían y ganaba la más
   genérica, con lo que se perdía el gesto de la marca (desplazamiento con
   sombra dura). Se restituye sin tocar las otras hojas. */
.button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--magenta, #E6007E);
}
.button { border-radius: 6px; }
.pill { border-radius: 999px; }

/* ---------- 12. Movimiento reducido ----------
   Respeta la preferencia del sistema para quien se marea con animaciones. */
@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 13. Páginas legales: el menú quedaba abierto y sin cerrar ----------
   Usan `<nav class="nav open">` sin el botón de menú y sin script.js, así que
   por debajo de 980 px se convertían en un panel flotante permanente encima
   del texto, imposible de cerrar. */
@media (max-width: 980px) {
  body.legal .nav.open,
  .legal-page .nav.open {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    background: transparent;
    border: 0;
    padding: 0;
  }
}

/* ---------- 14. La tipografía de las páginas de conversión no coincidía ----------
   /gracias, /404 y las páginas de acceso no cargaban las mismas fuentes ni
   fondos, así que la marca se rompía justo en el momento más importante. */
body { text-rendering: optimizeLegibility; }

/* Marca de publicación. Si el sitio no muestra este dato, lo que está
   publicado es una versión anterior a la de agosto de 2026. */
.dm-site-build {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  margin-left: 10px;
  white-space: nowrap;
}
@media (max-width: 720px) { .dm-site-build { display: none; } }