@charset "UTF-8";
:root {
  --color-primary: #005bb1;
  --color-on-primary: #ffffff;
  --color-primary-container: #1f74d6;
  --color-primary-container-2: #005bb1;
  --color-on-primary-container: #fefcff;
  --color-secondary: #b60078;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fc4db1;
  --color-on-secondary-container: #5b003a;
  --color-tertiary: #954500;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #bb5800;
  --color-background: #f9f9fc;
  --color-on-background: #1a1c1e;
  --color-surface: #f9f9fc;
  --color-on-surface: #1a1c1e;
  --color-surface-variant: #e2e2e5;
  --color-on-surface-variant: #414753;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f6;
  --color-surface-container-high: #e8e8ea;
  --color-surface-container-highest: #e2e2e5;
  --color-outline: #727784;
  --color-outline-variant: #c1c6d5;
  --color-btn-shadow-primary: #00468b;
  --color-btn-shadow-surface: #c1c6d5;
  /* Legacy variables from armar.scss */
  --color-ink: #18212b;
  --color-muted: #647080;
  --color-blue: #075daf;
  --color-blue-dark: #064987;
  --color-pink: #c5117e;
  --color-pink-soft: #ffe1ee;
  --color-line: #d9e0eb;
  --color-amber: #ad4e0d;
  --color-bg-body: #ffffff;
}

[data-theme=dark] {
  --color-primary: #9fc9ff;
  --color-on-primary: #003268;
  --color-primary-container: #00468a;
  --color-primary-container-2: #9fc9ff;
  --color-on-primary-container: #d2e4ff;
  --color-secondary: #ffb1d9;
  --color-on-secondary: #630040;
  --color-secondary-container: #8c005b;
  --color-on-secondary-container: #ffd9ea;
  --color-tertiary: #ffb68c;
  --color-on-tertiary: #522300;
  --color-tertiary-container: #723400;
  --color-background: #1a1c1e;
  --color-on-background: #e2e2e5;
  --color-surface: #1a1c1e;
  --color-on-surface: #e2e2e5;
  --color-surface-variant: #414753;
  --color-on-surface-variant: #c1c6d5;
  --color-surface-container-lowest: #0e0e11;
  --color-surface-container-low: #1a1c1e;
  --color-surface-container-high: #282a2d;
  --color-surface-container-highest: #333538;
  --color-outline: #8c919f;
  --color-outline-variant: #414753;
  --color-btn-shadow-primary: #00224d;
  --color-btn-shadow-surface: #1a1c1e;
  /* Legacy variables from armar.scss */
  --color-ink: #e2e2e5;
  --color-muted: #8c919f;
  --color-blue: #9fc9ff;
  --color-blue-dark: #003268;
  --color-pink: #ffb1d9;
  --color-pink-soft: #630040;
  --color-line: #414753;
  --color-amber: #ffb68c;
  --color-bg-body: #0e0e11;
}

body {
  background-color: var(--color-background, var(--color-bg-body, #ffffff));
}

/* ==========================================================================
   1. TOKENS DE DISEÑO (Extraídos de DESIGN.md)
   ========================================================================== */
/* ==========================================================================
   2. MIXINS TIPOGRÁFICOS
   ========================================================================== */
/* ==========================================================================
   3. MIXINS DE COMPONENTES Y ESTRUCTURA (3D-Tactile Modernism)
   ========================================================================== */
.legacy-section, .bento-container, .history-hero, .footer-container, .nav-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .legacy-section, .bento-container, .history-hero, .footer-container, .nav-container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ==========================================================================
   4. MIXINS DE INICIALIZACIÓN GLOBAL (Reset, Nav, Footer)
   ========================================================================== */
body {
  background-color: var(--color-background);
  color: var(--color-on-background);
}

/* Dark Mode Overrides for Hardcoded Components */
body, .site-body, .nav-header, .sales-global-header, .footer-site, .sales-submenu, .builder-header {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
}

.nav-item, .footer-link, .sales-submenu a, .config-tab {
  color: var(--color-on-surface-variant) !important;
}

.nav-item:hover, .footer-link:hover, .sales-submenu a:hover, .config-tab:hover {
  color: var(--color-primary) !important;
}

.sales-global-header .nav-item, .sales-global-header .nav-item:hover {
  color: inherit;
}

.footer-site p, .footer-copyright {
  color: var(--color-outline) !important;
}

.account-dialog, .config-panel {
  background: var(--color-surface-container-lowest) !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-outline-variant) !important;
}

.account-dialog input, .config-panel input {
  background: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-outline-variant) !important;
}

.account-dialog h2, .config-panel h2, .config-panel h3 {
  color: var(--color-on-surface) !important;
}

.account-dialog p, .config-panel p, .account-dialog label, .config-panel label {
  color: var(--color-on-surface-variant) !important;
}

/* ==========================================================================
   INICIALIZACIÓN GLOBAL
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.site-body {
  background-color: var(--color-background, #f9f9fc);
  color: var(--color-on-background, #1a1c1e);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.selection-theme ::selection {
  background-color: var(--color-primary-container, #1f74d6);
  color: var(--color-on-primary-container, #fefcff);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.nav-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(var(--color-surface, #f9f9fc), 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.4);
  box-shadow: 0 4px 20px rgba(var(--color-primary, #005bb1), 0.04);
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
}
.nav-brand .img {
  width: 72px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.nav-brand .img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: none;
  gap: 32px;
  flex: 1;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}
@media (max-width: 991px) {
  .nav-links {
    gap: 16px;
  }
}

.nav-item {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--color-on-surface-variant, #414753);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover, .nav-item:focus {
  color: var(--color-primary, #005bb1);
  background-color: rgba(var(--color-primary, #005bb1), 0.05);
  transform: translateY(-2px);
}
.nav-item.active {
  color: var(--color-primary, #005bb1);
  font-weight: 700;
  background-color: rgba(var(--color-primary, #005bb1), 0.08);
}

.btn-nav {
  display: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  background-color: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-primary, #00468b), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-nav:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-primary, #00468b), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-nav:hover {
  transform: scale(1.02);
}
@media (min-width: 768px) {
  .btn-nav {
    display: inline-flex;
  }
}

.account-trigger {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
  border-radius: 10px;
  color: var(--color-primary, #005bb1);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.account-trigger:hover {
  background: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  transform: translateY(-2px);
}
@media (min-width: 768px) {
  .account-trigger {
    display: inline-flex;
  }
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-secondary, #b60078);
  color: var(--color-on-secondary, #ffffff);
  font-size: 14px;
  font-weight: 800;
}

.account-trigger > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  font-size: 19px;
}

.global-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--color-primary-container, #1f74d6);
  color: var(--color-on-primary, #ffffff);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.global-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--color-primary, #005bb1), 0.25);
}
.global-cart b {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-secondary, #b60078);
  color: var(--color-on-secondary, #ffffff);
  font-size: 10px;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.account-modal[hidden] {
  display: none;
}

.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 30, 0.42);
  backdrop-filter: blur(5px);
}

.account-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 34px;
  border-radius: 24px;
  background: var(--color-surface-container-lowest, #ffffff);
  box-shadow: 0 24px 60px rgba(26, 28, 30, 0.22);
}
.account-dialog h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  margin: 16px 0 7px;
}
.account-dialog p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
}
.account-dialog form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.account-dialog form label {
  display: grid;
  gap: 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.account-dialog form input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
  border-radius: 9px;
  font: inherit;
}
.account-dialog form button {
  width: 100%;
}

.account-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--color-on-surface-variant, #414753);
  cursor: pointer;
}

.btn-menu-mobile {
  background: transparent;
  border: none;
  color: var(--color-primary, #005bb1);
  padding: 8px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .btn-menu-mobile {
    display: none;
  }
}

.footer-site {
  background-color: var(--color-surface-container-highest, #e2e2e5);
  padding: 64px 0 24px;
  border-top: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.5);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.footer-brand .img {
  width: 120px;
  height: auto;
  object-fit: contain;
}
.footer-brand p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-link {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-link:hover {
  color: var(--color-primary, #005bb1);
  transform: translateX(4px);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.5);
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-copyright {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-outline, #727784);
  font-size: 13px;
  text-align: center;
}

.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: var(--color-on-surface-variant, #414753);
  transition: color 0.2s ease;
}
.footer-social a:hover {
  color: var(--color-primary, #005bb1);
}

/* ==========================================================================
2. CLASES UTILITARIAS Y BOTONES (Basadas en Mixins)
========================================================================== */
.btn-3d {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  padding: 16px 32px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: all 0.15s ease;
  width: 100%;
}
@media (min-width: 640px) {
  .btn-3d {
    width: auto;
  }
}

.btn-primary {
  background-color: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-primary, #00468b), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-primary, #00468b), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
  transform: scale(1.02);
}

.btn-surface {
  background-color: var(--color-surface, #f9f9fc);
  color: var(--color-primary, #005bb1);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-surface, #c1c6d5), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
}
.btn-surface:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-surface, #c1c6d5), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-surface:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   ESTILOS GENERALES Y FONDOS
   ========================================================================== */
.history-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Efecto de fondo con gradientes radiales (Extraído del CSS en línea) */
.bg-blob-layer {
  background-image: radial-gradient(circle at 20% 30%, rgba(var(--color-secondary-container, #fc4db1), 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(var(--color-primary, #005bb1), 0.1) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Fix para el nav brand de esta página que era solo texto */
.nav-brand-text {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--color-primary, #005bb1);
  font-weight: 700;
}

/* ==========================================================================
   SECCIÓN HERO
   ========================================================================== */
.history-hero {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  .history-hero {
    flex-direction: row;
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.hero-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-title {
  font-family: "Montserrat", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 64px;
  letter-spacing: -0.02em;
  color: var(--color-on-surface, #1a1c1e);
}

.highlight-text {
  color: var(--color-primary, #005bb1);
  position: relative;
  display: inline-block;
}

.highlight-underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 12px;
  color: var(--color-secondary-container, #fc4db1);
}
.highlight-underline.op-50 {
  opacity: 0.5;
}

.history-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-on-surface-variant, #414753);
  max-width: 36rem;
}

.hero-image-wrapper {
  flex: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(var(--color-primary, #005bb1), 0.3);
}
@media (min-width: 768px) {
  .hero-image-wrapper {
    aspect-ratio: 4/3;
  }
}
.hero-image-wrapper:hover .hero-main-img {
  transform: scale(1.05);
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(var(--color-primary, #005bb1), 0.2), transparent);
  pointer-events: none;
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

/* ==========================================================================
   BENTO GRID NARRATIVE
   ========================================================================== */
.history-bento-section {
  width: 100%;
  background-color: var(--color-surface-container-low, #f3f3f6);
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 768px) {
  .history-bento-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Tarjetas de Texto */
.bento-card-text {
  background-color: var(--color-surface, #f9f9fc);
  border-radius: 1.5rem;
  padding: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(var(--color-surface-variant, #e2e2e5), 0.5);
}
@media (min-width: 768px) {
  .bento-card-text.card-wide {
    grid-column: span 2/span 2;
  }
}

/* Blobs decorativos en las esquinas */
.blob-accent {
  position: absolute;
  width: 256px;
  height: 256px;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
}
.blob-accent.blob-tr {
  top: -80px;
  right: -80px;
  background-color: rgba(var(--color-secondary-container, #fc4db1), 0.1);
}
.blob-accent.blob-bl {
  bottom: -80px;
  left: -80px;
  background-color: rgba(var(--color-primary, #005bb1), 0.05);
}

.bento-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 16px;
}
.bento-heading.text-primary {
  color: var(--color-primary, #005bb1);
}
.bento-heading.text-secondary {
  color: var(--color-secondary, #b60078);
}

.bento-body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-on-surface-variant, #414753);
}

/* Tarjetas de Imagen */
.bento-card-image {
  background-color: var(--color-surface, #f9f9fc);
  border-radius: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 300px;
}
@media (min-width: 768px) {
  .bento-card-image {
    grid-column: span 1/span 1;
  }
}

.bento-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   SECCIÓN: EL LEGADO DE AGUASCALIENTES
   ========================================================================== */
.legacy-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .legacy-section {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

.legacy-header {
  text-align: center;
  margin-bottom: 64px;
}

.legacy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: 9999px;
  margin-bottom: 16px;
}
.legacy-badge .icon-badge {
  margin-right: 8px;
  color: var(--color-tertiary, #954500);
  font-size: 18px;
}

.legacy-title {
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--color-on-surface, #1a1c1e);
}

.legacy-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-on-surface-variant, #414753);
  margin-top: 16px;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Grid de Legado */
.legacy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .legacy-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}
@media (min-width: 1024px) {
  .legacy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.legacy-card {
  background-color: var(--color-surface, #f9f9fc);
  border-radius: 1.5rem;
  padding: 24px;
  margin-top: 48px; /* Espacio para que la imagen sobresalga */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(var(--color-surface-variant, #e2e2e5), 0.3);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.legacy-card.hover-shadow-primary:hover {
  box-shadow: 0 12px 32px -10px rgba(var(--color-primary, #005bb1), 0.2);
}
.legacy-card.hover-shadow-secondary:hover {
  box-shadow: 0 12px 32px -10px rgba(var(--color-secondary, #b60078), 0.2);
}
.legacy-card.hover-shadow-tertiary:hover {
  box-shadow: 0 12px 32px -10px rgba(var(--color-tertiary, #954500), 0.2);
}

.legacy-img-wrapper {
  width: 128px;
  height: 128px;
  margin-top: -80px; /* Hace que sobresalga hacia arriba */
  margin-bottom: 16px;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 4px solid var(--color-surface, #f9f9fc);
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Efecto hover acoplado al group */
.legacy-card:hover .legacy-img-wrapper {
  transform: translateY(-8px);
}

.legacy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy-card-title {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--color-on-surface, #1a1c1e);
  margin-bottom: 8px;
}

.legacy-card-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  margin-bottom: 16px;
  flex-grow: 1; /* Empuja los tags hacia abajo */
}

.legacy-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}

.legacy-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
}
.legacy-tag.tag-surface {
  background-color: var(--color-surface-variant, #e2e2e5);
  color: var(--color-on-surface-variant, #414753);
}

/* Modificadores de Footer para esta página */
.text-footer-align {
  text-align: center;
}
@media (min-width: 768px) {
  .text-footer-align {
    text-align: left;
  }
}

/* ==========================================================================
   ANIMACIÓN REVEAL (JS Triggered)
   ========================================================================== */
.reveal-element {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

/*# sourceMappingURL=his.css.map */